当前位置：首页 > VUE

vue实现图片列表

2026-02-18 09:14:35VUE

实现图片列表的基本方法

使用Vue.js实现图片列表可以通过v-for指令动态渲染数据。核心步骤包括准备图片数据数组、使用v-for循环渲染<img>标签，以及绑定图片路径。

<template>
  <div class="image-list">
    <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: 'Description 1' },
        { url: 'path/to/image2.jpg', alt: 'Description 2' }
      ]
    }
  }
}
</script>

优化图片加载与显示

为提升用户体验，可以添加懒加载和占位符功能。使用loading="lazy"属性和CSS控制图片容器比例。

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

<style>
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.image-container {
  aspect-ratio: 1/1;
  background: #f0f0f0;
}
</style>

实现分页加载

对于大量图片数据，采用分页或无限滚动方案。通过计算属性分割数据，并添加加载更多按钮。

<template>
  <div>
    <div class="image-list">
      <img 
        v-for="(image, index) in visibleImages" 
        :key="index" 
        :src="image.url"
      >
    </div>
    <button @click="loadMore" v-if="hasMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [], // 从API获取的完整数据
      pageSize: 10,
      currentPage: 1
    }
  },
  computed: {
    visibleImages() {
      return this.images.slice(0, this.pageSize * this.currentPage)
    },
    hasMore() {
      return this.visibleImages.length < this.images.length
    }
  },
  methods: {
    loadMore() {
      this.currentPage++
    }
  }
}
</script>

高级交互功能

添加图片预览功能，使用事件处理实现点击放大。通过Vue的响应式数据控制模态框显示。

<template>
  <div>
    <div class="image-list">
      <img 
        v-for="(image, index) in images" 
        :key="index" 
        :src="image.thumbnail"
        @click="openModal(image)"
      >
    </div>

    <div class="modal" v-if="selectedImage">
      <img :src="selectedImage.fullSize">
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { thumbnail: 'thumb1.jpg', fullSize: 'full1.jpg' }
      ],
      selectedImage: null
    }
  },
  methods: {
    openModal(image) {
      this.selectedImage = image
    },
    closeModal() {
      this.selectedImage = null
    }
  }
}
</script>

性能优化建议

对于大型图片列表，考虑使用虚拟滚动技术。第三方库如vue-virtual-scroller可以高效渲染可见区域内的图片。

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="scroller"
    :items="images"
    :item-size="200"
    key-field="id"
  >
    <template v-slot="{ item }">
      <img :src="item.url">
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller },
  data() {
    return {
      images: [] // 包含id属性的图片数组
    }
  }
}
</script>

vue实现图片列表