当前位置：首页 > VUE

vue实现图片显示

2026-01-19 19:37:10VUE

使用 `<img>` 标签直接显示图片

在 Vue 模板中直接使用 HTML 的 <img> 标签，通过 src 属性绑定图片路径。静态图片可以直接写路径，动态图片需使用 Vue 的数据绑定。

<template>
  <!-- 静态图片 -->
  <img src="@/assets/static-image.jpg" alt="Static Image">

  <!-- 动态图片 -->
  <img :src="dynamicImagePath" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      dynamicImagePath: require('@/assets/dynamic-image.jpg')
    }
  }
}
</script>

通过 `require` 动态加载图片

当图片路径需要动态计算时，使用 require 确保 Webpack 正确处理模块依赖。适用于通过变量拼接路径的场景。

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

<script>
export default {
  data() {
    return {
      imageName: 'example',
      imageUrl: require(`@/assets/${this.imageName}.jpg`)
    }
  }
}
</script>

使用 `v-for` 循环显示多张图片

结合 v-for 指令渲染图片列表，适用于从数组或 API 获取的多张图片展示。

<template>
  <div v-for="(item, index) in imageList" :key="index">
    <img :src="item.url" :alt="item.name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        { url: require('@/assets/image1.jpg'), name: 'Image 1' },
        { url: require('@/assets/image2.jpg'), name: 'Image 2' }
      ]
    }
  }
}
</script>

处理图片加载失败事件

通过 @error 监听图片加载失败事件，可设置默认占位图或错误处理逻辑。

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

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/potential-broken-link.jpg'
    }
  },
  methods: {
    handleImageError(e) {
      e.target.src = require('@/assets/fallback.jpg')
    }
  }
}
</script>

使用第三方组件优化图片加载

借助如 vue-lazyload 库实现懒加载，提升页面性能。需先安装依赖（npm install vue-lazyload）。

<template>
  <img v-lazy="lazyImageUrl" alt="Lazy Loaded Image">
</template>

<script>
import VueLazyload from 'vue-lazyload'
import Vue from 'vue'

Vue.use(VueLazyload, {
  loading: require('@/assets/loading-spinner.gif')
})

export default {
  data() {
    return {
      lazyImageUrl: 'https://example.com/large-image.jpg'
    }
  }
}
</script>