vue 实现图片
Vue 实现图片显示与操作
在Vue中实现图片功能通常涉及静态资源引用、动态绑定、懒加载、预览等场景。以下是常见实现方式：
静态图片引用
将图片放入public或assets目录后引用：
<!-- public目录图片（直接根路径引用） -->
<img src="/image.jpg" alt="public image">
<!-- assets目录图片（需require或import） -->
<img :src="require('@/assets/image.png')" alt="asset image">动态图片绑定
通过数据绑定显示动态图片路径：
data() {
return {
imageUrl: 'https://example.com/pic.jpg'
}
}<img :src="imageUrl" alt="dynamic image">图片懒加载
使用vue-lazyload插件优化性能：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('@/assets/loading.gif')
})<img v-lazy="imageUrl" alt="lazy image">图片预览组件
实现点击预览功能可借助el-image(Element UI)或自定义组件：
<el-image
:src="imageUrl"
:preview-src-list="[imageUrl]"
style="width: 200px">
</el-image>图片上传处理
通过<input type="file">结合FormData实现上传：
<input type="file" @change="handleUpload">methods: {
handleUpload(e) {
const file = e.target.files[0]
const formData = new FormData()
formData.append('image', file)
// 发送axios请求...
}
}图片裁剪与编辑
使用vue-cropper等库实现高级功能：
import VueCropper from 'vue-cropper'
export default {
components: { VueCropper }
}<vue-cropper
:img="imageUrl"
@crop="handleCrop">
</vue-cropper>注意事项
- 静态资源建议使用
assets目录以便webpack处理 - 动态路径需确保响应式更新
- 大图建议使用CDN加速和懒加载
- 移动端需考虑图片自适应（CSS设置
max-width: 100%）
