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">
