当前位置：首页 > VUE

vue实现图片展示

2026-02-22 03:31:09VUE

Vue 实现图片展示的方法

在 Vue 中实现图片展示可以通过多种方式完成，以下是几种常见的方法：

静态图片展示

静态图片可以直接通过 img 标签引入，图片文件通常放在 public 或 assets 目录下。

<template>
  <img src="@/assets/example.jpg" alt="Example Image">
</template>

@/assets 表示项目中的 assets 目录
图片路径需根据实际文件位置调整

动态绑定图片路径

如果需要动态展示不同的图片，可以使用 v-bind 绑定 src 属性。

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

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

使用 require 确保 Webpack 正确处理路径
图片路径可以来自 API 或用户输入

图片懒加载

对于大量图片的页面，可以使用懒加载优化性能。

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

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

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'loading-image.jpg',
  attempt: 1
})

export default {
  data() {
    return {
      imageUrl: 'actual-image.jpg'
    }
  }
}
</script>

需要先安装 vue-lazyload 插件
配置项可自定义加载行为和占位图

图片预览组件

实现点击图片放大预览功能可以使用现有组件库或自定义实现。

<template>
  <div>
    <img 
      v-for="(img, index) in images" 
      :key="index" 
      :src="img" 
      @click="showPreview(index)"
    >
    <div v-if="previewVisible" class="preview-modal">
      <img :src="images[currentIndex]">
      <button @click="previewVisible = false">Close</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        require('@/assets/image1.jpg'),
        require('@/assets/image2.jpg')
      ],
      previewVisible: false,
      currentIndex: 0
    }
  },
  methods: {
    showPreview(index) {
      this.currentIndex = index
      this.previewVisible = true
    }
  }
}
</script>

<style>
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

通过 v-for 循环展示多张图片
点击图片触发预览模态框
样式可根据需求调整

使用第三方组件库

UI 组件库如 Element UI、Vant 等提供了现成的图片展示组件。

vue实现图片展示

<template>
  <el-image 
    style="width: 100px; height: 100px"
    :src="url"
    fit="cover"
  ></el-image>
</template>

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