用vue实现插入图片
使用静态资源引入图片
在 Vue 项目中，可以直接将图片放入 public 或 assets 目录，通过相对路径引用。public 目录下的文件会被直接复制到输出目录，而 assets 目录中的文件会经过 webpack 处理。
<template>
<!-- 从 public 目录引用 -->
<img src="/images/example.jpg" alt="Public Image">
<!-- 从 assets 目录引用 -->
<img :src="require('@/assets/example.jpg')" alt="Assets Image">
</template>动态绑定图片路径
当图片路径需要动态生成时，可以使用 require 或计算属性实现。
<template>
<img :src="imagePath" alt="Dynamic Image">
</template>
<script>
export default {
data() {
return {
imageName: 'example.jpg'
}
},
computed: {
imagePath() {
return require(`@/assets/${this.imageName}`)
}
}
}
</script>使用 Base64 编码图片
对于小图片，可以直接将 Base64 编码嵌入模板中。
<template>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Base64 Image">
</template>从网络加载图片
直接使用网络图片 URL 是最简单的方式。
<template>
<img src="https://example.com/path/to/image.jpg" alt="Web Image">
</template>使用 Vue 组件封装图片
可以创建可复用的图片组件，添加加载状态和错误处理。
<template>
<div class="image-container">
<img
:src="src"
:alt="alt"
@load="handleLoad"
@error="handleError"
>
<div v-if="loading" class="loading">Loading...</div>
<div v-if="error" class="error">Failed to load image</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, .error {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.1);
}
</style>使用第三方库处理图片
对于更复杂的图片需求，可以考虑使用专门处理图片的 Vue 库：
-
vue-lazyload：实现图片懒加载
npm install vue-lazyloadimport VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)<img v-lazy="imageUrl" alt="Lazy Image"> -
v-img：提供更多图片处理功能
npm install v-img
响应式图片处理
根据屏幕尺寸加载不同大小的图片，可以使用 <picture> 元素或 CSS 媒体查询。
<template>
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive Image">
</picture>
</template>图片优化建议
- 使用合适的图片格式（WebP 通常比 JPEG/PNG 更高效）
- 压缩图片减少文件大小
- 对重要图片使用预加载
<link rel="preload" href="important.jpg" as="image"> - 考虑使用 CDN 加速图片加载
