1. 静态资源存放位置
src/
|-- public/
| |-- image/
| |-- css/
| |-- js/
2. 图片路径引用
2.1 相对路径
<img src="/image/example.png" alt="示例图片">
2.2 绝对路径
require('@/image/example.png')
这里的@
符号是Vue CLI项目中的别名,通常指向src
目录。
3. 图片懒加载
首先,你需要安装vue-lazyload
插件:
npm install vue-lazyload --save
然后,在main.js
中引入并使用它:
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
在组件中使用v-lazy
指令:
<img v-lazy="imageSrc" alt="懒加载图片">
4. 图片压缩与优化
4.1 在线工具
4.2 本地工具
from PIL import Image
import os
def compress_image(input_path, output_path, quality=85):
with Image.open(input_path) as img:
img.save(output_path, optimize=True, quality=quality)
# 压缩图片
compress_image('public/image/example.png', 'public/image/compressed_example.png')
5. 图片预加载
let img = new Image();
img.src = '/image/large-image.jpg';
img.onload = function() {
// 图片加载完成后的处理
};