当前位置：首页 > VUE

vue实现加载图片

2026-03-29 16:13:46VUE

在Vue中加载图片的方法

使用静态资源路径 将图片放在项目的public或assets目录下，通过相对路径引用。public目录下的文件会被直接复制到打包目录，而assets目录下的文件会被webpack处理。

<!-- 引用public目录下的图片 -->
<img src="/images/example.jpg" alt="Example">

<!-- 引用assets目录下的图片 -->
<img :src="require('@/assets/images/example.jpg')" alt="Example">

动态绑定图片路径 当需要根据数据动态加载图片时，可以使用require或动态拼接路径。

<template>
  <img :src="imagePath" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      imageName: 'example.jpg',
      imagePath: require('@/assets/images/' + this.imageName)
    }
  }
}
</script>

使用网络图片 直接使用图片的URL地址即可加载网络图片。

<img src="https://example.com/images/example.jpg" alt="Network Image">

处理图片加载失败 可以通过@error事件监听图片加载失败的情况，并显示默认图片。

<template>
  <img 
    :src="imageUrl" 
    @error="handleImageError" 
    alt="Fallback Image"
  >
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/images/example.jpg',
      defaultImage: require('@/assets/images/default.jpg')
    }
  },
  methods: {
    handleImageError(e) {
      e.target.src = this.defaultImage
    }
  }
}
</script>

使用懒加载 对于大量图片，可以使用懒加载技术优化性能。Vue-lazyload是一个常用的懒加载库。

安装：

npm install vue-lazyload

使用：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/images/error.png'),
  loading: require('@/assets/images/loading.gif'),
  attempt: 1
})

<img v-lazy="imageUrl" alt="Lazy Load Image">

使用CSS背景图片 在Vue组件中，可以通过绑定样式的方式设置背景图片。

vue实现加载图片

<template>
  <div 
    class="image-container" 
    :style="{ backgroundImage: `url(${imageUrl})` }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/images/background.jpg')
    }
  }
}
</script>

<style>
.image-container {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}
</style>