vue图片实现功能
Vue 图片功能实现方法
图片展示
使用 v-bind 或简写 : 动态绑定图片路径，适合从数据源加载图片的场景。
<template>
<img :src="imageUrl" alt="动态图片">
</template>
<script>
export default {
data() {
return {
imageUrl: require('@/assets/demo.jpg') // 或网络URL
}
}
}
</script>图片懒加载
通过 v-lazy 指令实现滚动到视口时加载，需安装 vue-lazyload 插件。
// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require('@/assets/loading.gif')
})<img v-lazy="imageUrl">图片预览组件
使用 element-ui 的 el-image 组件实现预览功能。
<el-image
:src="url"
:preview-src-list="[url]"
:zoom-rate="1.2"
fit="cover">
</el-image>图片上传处理
通过 input 结合 FileReader 实现本地预览，上传使用 axios。
<input type="file" @change="handleUpload">
<img :src="previewImage" v-if="previewImage">methods: {
handleUpload(e) {
const file = e.target.files[0]
this.previewImage = URL.createObjectURL(file)
// 实际提交需使用FormData
}
}图片裁剪功能
集成 cropperjs 实现客户端裁剪。
import Cropper from 'cropperjs'
mounted() {
this.cropper = new Cropper(this.$refs.image, {
aspectRatio: 16/9
})
}性能优化技巧
- 使用 WebP 格式替代传统格式
- 添加
loading="lazy"原生属性 - 对静态资源使用 CDN 加速
- 大图分片加载或使用缩略图策略
响应式图片处理
通过 picture 元素适配不同分辨率设备。
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>SVG 图标处理
将 SVG 转换为 Vue 组件直接使用。
<template>
<svg-icon icon-class="user" />
</template>
