当前位置：首页 > VUE

vue实现展示图片

2026-02-17 06:12:20VUE

使用 `v-bind` 绑定图片路径

在 Vue 中可以通过 v-bind（或简写为 :）动态绑定图片路径。将图片路径存储在 data 中，通过 src 属性动态渲染：

<template>
  <img :src="imagePath" alt="示例图片">
</template>

<script>
export default {
  data() {
    return {
      imagePath: require('@/assets/example.jpg') // 使用 require 确保路径正确
    }
  }
}
</script>

动态渲染图片列表

通过 v-for 循环渲染多张图片时，建议将图片信息存储在数组中：

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

<script>
export default {
  data() {
    return {
      imageList: [
        { url: require('@/assets/img1.jpg'), alt: '图片1' },
        { url: require('@/assets/img2.jpg'), alt: '图片2' }
      ]
    }
  }
}
</script>

处理网络图片

直接使用网络图片 URL 时无需 require，但建议添加加载失败处理：

vue实现展示图片

<template>
  <img 
    :src="webImageUrl" 
    alt="网络图片" 
    @error="handleImageError"
  >
</template>

<script>
export default {
  data() {
    return {
      webImageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    handleImageError(e) {
      e.target.src = require('@/assets/fallback.jpg') // 加载失败时显示备用图
    }
  }
}
</script>

使用 `v-lazy` 实现懒加载

对于大量图片，可通过 vue-lazyload 插件优化性能：

安装插件：
```
npm install vue-lazyload
```

配置使用：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('@/assets/loading.gif') // 加载占位图
})

组件中使用：

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

图片样式控制

通过 class 或 style 绑定控制图片显示样式：

<template>
  <img 
    :src="imagePath" 
    class="responsive-img" 
    :style="{ maxWidth: imgMaxWidth }"
  >
</template>

<script>
export default {
  data() {
    return {
      imgMaxWidth: '500px'
    }
  }
}
</script>

<style>
.responsive-img {
  height: auto;
  border-radius: 4px;
}
</style>