vue 实现图片列表

实现图片列表的基本方法

在Vue中实现图片列表通常需要结合v-for指令循环渲染图片数据。以下是基本实现步骤：

准备图片数据数组，通常放在组件的data或通过API获取：

data() {
  return {
    images: [
      { id: 1, url: 'image1.jpg', title: '图片1' },
      { id: 2, url: 'image2.jpg', title: '图片2' },
      // 更多图片数据...
    ]
  }
}

在模板中使用v-for渲染列表：

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

添加样式布局

为图片列表添加CSS样式，常见布局方式包括：

网格布局（Grid）：

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

弹性布局（Flexbox）：

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.image-item {
  flex: 1 0 200px;
}

图片懒加载优化

为提高性能，可以实现图片懒加载：

使用Intersection Observer API：

methods: {
  lazyLoadImages() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target
          img.src = img.dataset.src
          observer.unobserve(img)
        }
      })
    })

    document.querySelectorAll('img[data-src]').forEach(img => {
      observer.observe(img)
    })
  }
},
mounted() {
  this.lazyLoadImages()
}

修改模板中的img标签：

<img :data-src="image.url" src="placeholder.jpg" :alt="image.title">

实现图片预览功能

添加点击图片放大预览功能：

data() {
  return {
    previewImage: null
  }
},
methods: {
  showPreview(image) {
    this.previewImage = image
  },
  closePreview() {
    this.previewImage = null
  }
}

添加预览模态框：

<div v-if="previewImage" class="preview-modal" @click="closePreview">
  <img :src="previewImage.url" :alt="previewImage.title">
</div>

响应式图片处理

根据屏幕尺寸加载不同分辨率的图片：

<picture>
  <source media="(min-width: 1200px)" :srcset="image.largeUrl">
  <source media="(min-width: 768px)" :srcset="image.mediumUrl">
  <img :src="image.smallUrl" :alt="image.title">
</picture>

与后端API集成

从后端API获取图片数据：

async created() {
  try {
    const response = await fetch('/api/images')
    this.images = await response.json()
  } catch (error) {
    console.error('获取图片数据失败:', error)
  }
}

图片上传功能

实现图片上传到列表：

methods: {
  async uploadImage(event) {
    const file = event.target.files[0]
    const formData = new FormData()
    formData.append('image', file)

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      })
      const newImage = await response.json()
      this.images.unshift(newImage)
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

上传表单：

<input type="file" accept="image/*" @change="uploadImage">