vue实现展示图片
在 Vue 中展示图片的方法
静态图片展示
静态图片通常存放在项目的 public 或 assets 目录下。使用 img 标签直接引用。
<template>
<img src="@/assets/example.jpg" alt="示例图片">
</template>@/assets 是 Vue CLI 项目的默认资源目录，Webpack 会处理这些资源。
动态绑定图片路径
当图片路径需要根据数据动态变化时，使用 v-bind 或简写 : 绑定 src 属性。
<template>
<img :src="imagePath" alt="动态图片">
</template>
<script>
export default {
data() {
return {
imagePath: require('@/assets/dynamic.jpg')
}
}
}
</script>使用 require 确保 Webpack 能正确解析路径。
使用 Base64 编码图片
对于小图片，可以直接使用 Base64 编码嵌入。
<template>
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Base64图片">
</template>图片懒加载
实现图片懒加载可以优化页面性能，使用 vue-lazyload 插件。
安装插件：
npm install vue-lazyload在 main.js 中配置：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: 'loading.gif',
attempt: 1
})组件中使用：
<template>
<img v-lazy="imageUrl" alt="懒加载图片">
</template>图片加载状态处理
添加加载中和加载失败的占位图。
<template>
<div>
<img
:src="imageUrl"
@load="onImageLoad"
@error="onImageError"
alt="图片"
>
<div v-if="isLoading">加载中...</div>
<div v-if="isError">加载失败</div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true,
isError: false,
imageUrl: 'path/to/image.jpg'
}
},
methods: {
onImageLoad() {
this.isLoading = false
},
onImageError() {
this.isLoading = false
this.isError = true
}
}
}
</script>使用第三方图片服务
集成第三方图片服务如 Cloudinary 或 Imgix。
<template>
<img :src="`https://res.cloudinary.com/demo/image/upload/${imageId}.jpg`" alt="Cloudinary图片">
</template>响应式图片
使用 srcset 和 sizes 属性实现响应式图片。
<template>
<img
srcset="@/assets/small.jpg 480w, @/assets/large.jpg 1080w"
sizes="(max-width: 600px) 480px, 1080px"
src="@/assets/fallback.jpg"
alt="响应式图片"
>
</template>图片组件封装
封装可复用的图片组件。
<template>
<div class="image-container">
<img
:src="src"
:alt="alt"
@load="handleLoad"
@error="handleError"
>
<div v-if="loading" class="loading-placeholder">加载中...</div>
<div v-if="error" class="error-placeholder">加载失败</div>
</div>
</template>
<script>
export default {
props: {
src: String,
alt: String
},
data() {
return {
loading: true,
error: false
}
},
methods: {
handleLoad() {
this.loading = false
},
handleError() {
this.loading = false
this.error = true
}
}
}
</script>
<style scoped>
.image-container {
position: relative;
}
.loading-placeholder,
.error-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
}
</style>以上方法涵盖了 Vue 中展示图片的常见场景，从基础展示到高级功能如懒加载和错误处理，可根据实际需求选择合适的方式。
