1. 图片路径的定义
1.1 在data中定义
data() {
return {
imgUrl: 'path/to/image.png'
};
}
在模板中使用：
<img :src="imgUrl" alt="描述">
1.2 使用绝对路径
<img src="/path/to/image.png" alt="描述">
1.3 使用相对路径
<img src="image.png" alt="描述">
1.4 使用import引入
import avatar from '@/assets/logo.png';
export default {
data() {
return {
avatarUrl: avatar
};
}
};
在模板中使用：
<img :src="avatarUrl" alt="描述">
2. 图片懒加载
2.1 安装插件
npm install vue-lazyload --save
2.2 引入插件
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
2.3 使用懒加载
<img v-lazy="imageSrc" alt="描述">
3. 图片压缩与优化
3.1 在线工具
- TinyPNG
- Compressor.js
3.2 命名规范
使用有意义的文件名，如product-01.jpg，便于管理和检索。