vue 实现图片列表

实现图片列表的基本方法

在Vue中实现图片列表可以通过v-for指令动态渲染图片数据。需要准备一个包含图片信息的数组，并通过v-for循环渲染到模板中。

<template>
  <div class="image-list">
    <div v-for="(image, index) in images" :key="index" class="image-item">
      <img :src="image.url" :alt="image.alt">
      <p>{{ image.title }}</p>
    </div>
  </div>
</template>

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

<style scoped>
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.image-item {
  width: 200px;
}
.image-item img {
  width: 100%;
  height: auto;
}
</style>

实现懒加载图片

对于大量图片的情况，可以使用懒加载技术优化性能。Vue的vue-lazyload插件可以方便地实现这一功能。

安装插件：

npm install vue-lazyload

在Vue中使用：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'path/to/error-image.png',
  loading: 'path/to/loading-image.gif',
  attempt: 1
})

模板中使用：

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

实现图片预览功能

为图片列表添加点击预览功能，可以使用vue-image-lightbox等插件。

安装插件：

npm install vue-image-lightbox

组件中使用：

import Lightbox from 'vue-image-lightbox'
export default {
  components: {
    Lightbox
  },
  data() {
    return {
      images: [...],
      showLightbox: false,
      currentImageIndex: 0
    }
  },
  methods: {
    openLightbox(index) {
      this.currentImageIndex = index
      this.showLightbox = true
    }
  }
}

模板部分：

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

<lightbox 
  :images="images"
  :showLightbox="showLightbox"
  :currentIndex="currentImageIndex"
  @close="showLightbox = false"
/>

响应式图片列表布局

使用CSS Grid或Flexbox实现响应式图片列表布局，适应不同屏幕尺寸。

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
}

@media (max-width: 768px) {
  .image-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .image-list {
    grid-template-columns: 1fr;
  }
}

从API获取图片数据

实际应用中，图片数据通常来自API接口。可以使用Axios获取数据。

import axios from 'axios'

export default {
  data() {
    return {
      images: [],
      isLoading: false,
      error: null
    }
  },
  created() {
    this.fetchImages()
  },
  methods: {
    async fetchImages() {
      this.isLoading = true
      try {
        const response = await axios.get('https://api.example.com/images')
        this.images = response.data
      } catch (err) {
        this.error = err.message
      } finally {
        this.isLoading = false
      }
    }
  }
}

模板中显示加载状态：

<div v-if="isLoading">Loading...</div>
<div v-else-if="error">{{ error }}</div>
<div v-else class="image-list">
  <!-- 图片列表内容 -->
</div>