vue实现图片加载
图片加载基础方法
在Vue中加载图片可以通过直接使用<img>标签或结合动态绑定实现。静态图片直接指定路径，动态图片使用v-bind绑定数据。
静态加载示例：
<img src="@/assets/example.jpg" alt="示例图片">动态加载示例：
<template>
<img :src="imagePath" alt="动态图片">
</template>
<script>
export default {
data() {
return {
imagePath: require('@/assets/dynamic-image.jpg')
}
}
}
</script>使用require动态加载
当需要动态切换图片时，建议使用require方法确保Webpack正确处理路径。这种方式适合在v-for循环中加载不同图片。
<template>
<div v-for="item in items" :key="item.id">
<img :src="require(`@/assets/${item.imageName}`)" :alt="item.altText">
</div>
</template>图片懒加载实现
对于长页面中的图片，使用懒加载可以提升性能。Vue-lazyload是常用插件。
安装插件：
npm install vue-lazyload配置使用：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: 'loading-spinner.gif',
attempt: 3
})模板中使用：
<img v-lazy="imageUrl" alt="懒加载图片">图片加载状态处理
添加加载中和加载失败的状态处理可以改善用户体验。
<template>
<div class="image-container">
<img
:src="imageUrl"
@load="handleLoad"
@error="handleError"
v-show="!isLoading && !isError">
<div v-if="isLoading" class="loading-placeholder">加载中...</div>
<div v-if="isError" class="error-placeholder">图片加载失败</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
isError: false
}
},
methods: {
handleLoad() {
this.isLoading = false
},
handleError() {
this.isLoading = false
this.isError = true
}
}
}
</script>响应式图片处理
针对不同屏幕尺寸加载不同图片，可以使用<picture>元素结合媒体查询。
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>图片预加载技术
对于关键图片资源，可以使用预加载确保及时显示。
export default {
methods: {
preloadImages() {
const images = ['image1.jpg', 'image2.jpg']
images.forEach(src => {
const img = new Image()
img.src = require(`@/assets/${src}`)
})
}
},
mounted() {
this.preloadImages()
}
}
