当前位置：首页 > VUE

vue实现图片展示

2026-01-21 12:05:35VUE

使用 `v-for` 动态渲染图片列表

通过 v-for 指令可以循环渲染图片数组，结合 :src 动态绑定图片路径。

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

<script>
export default {
  data() {
    return {
      images: [
        { url: '/path/to/image1.jpg', alt: '描述1' },
        { url: '/path/to/image2.jpg', alt: '描述2' }
      ]
    }
  }
}
</script>

懒加载优化图片加载性能

使用 vue-lazyload 插件实现图片懒加载，减少首屏加载时间。

安装插件：

npm install vue-lazyload

配置插件并替换 src 为 v-lazy：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: '/placeholder.png', // 占位图
  error: '/error.png'         // 加载失败图
})

<img v-lazy="image.url" :alt="image.alt">

实现图片预览功能

结合第三方库（如 viewer.js 或 vue-image-lightbox）实现点击放大预览。

以 vue-image-lightbox 为例：
安装依赖：

npm install vue-image-lightbox

示例代码：

<template>
  <div>
    <img 
      v-for="(image, index) in images" 
      :key="index" 
      :src="image.url" 
      @click="openLightbox(index)"
    >
    <vue-image-lightbox
      :images="images.map(img => img.url)"
      :showLightbox="isOpen"
      :currentIndex="currentIndex"
      @close="isOpen = false"
    ></vue-image-lightbox>
  </div>
</template>

<script>
import VueImageLightbox from 'vue-image-lightbox'
export default {
  components: { VueImageLightbox },
  data() {
    return {
      images: [/* 图片数组 */],
      isOpen: false,
      currentIndex: 0
    }
  },
  methods: {
    openLightbox(index) {
      this.currentIndex = index;
      this.isOpen = true;
    }
  }
}
</script>

响应式图片布局

使用 CSS Grid 或 Flexbox 实现自适应图片排列，结合 @media 查询适配不同屏幕尺寸。

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .image-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

图片上传与本地预览

通过 <input type="file"> 实现上传，并用 URL.createObjectURL 生成本地预览。

<template>
  <div>
    <input type="file" @change="handleUpload" accept="image/*">
    <img v-if="previewUrl" :src="previewUrl" alt="预览图">
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: ''
    }
  },
  methods: {
    handleUpload(e) {
      const file = e.target.files[0];
      this.previewUrl = URL.createObjectURL(file);
    }
  }
}
</script>

vue实现图片展示