当前位置：首页 > VUE

vue实现登录添加图片

2026-02-24 15:46:09VUE

实现登录页面添加图片

在Vue中为登录页面添加图片可以通过静态资源引入或动态加载方式实现。以下是几种常见方法：

静态资源引入方式

将图片放在public或assets目录下，通过相对路径引用：

<template>
  <div class="login-container">
    <img src="@/assets/login-bg.jpg" alt="登录背景图">
    <!-- 或使用public目录下的图片 -->
    <img src="/images/login-bg.jpg" alt="登录背景图">
  </div>
</template>

动态绑定图片路径

使用require或动态绑定src：

vue实现登录添加图片

<template>
  <div>
    <img :src="require('@/assets/' + imageName)" alt="动态图片">
    <!-- 或 -->
    <img :src="imageUrl" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'login-bg.jpg',
      imageUrl: require('@/assets/login-bg.jpg')
    }
  }
}
</script>

背景图片样式实现

通过CSS设置背景图片：

<template>
  <div class="login-bg">
    <!-- 登录表单内容 -->
  </div>
</template>

<style>
.login-bg {
  background-image: url('@/assets/login-bg.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
}
</style>

使用网络图片

直接使用网络图片URL：

vue实现登录添加图片

<template>
  <img src="https://example.com/login-bg.jpg" alt="网络图片">
</template>

图片优化处理

对于需要优化的图片，可以使用v-lazy等懒加载指令：

<template>
  <img v-lazy="imageUrl" alt="懒加载图片">
</template>

<script>
import { Lazyload } from 'vant';
Vue.use(Lazyload);
</script>

响应式图片处理

根据不同屏幕尺寸显示不同图片：

<picture>
  <source media="(min-width: 768px)" srcset="@/assets/login-bg-large.jpg">
  <source media="(max-width: 767px)" srcset="@/assets/login-bg-small.jpg">
  <img src="@/assets/login-bg-default.jpg" alt="响应式图片">
</picture>

每种方法适用于不同场景，静态资源适合固定不变的图片，动态绑定适合需要变化的图片，背景图适合全屏展示，网络图片适合CDN资源，懒加载优化性能，响应式处理适配多端。