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() {
    // 图片加载完成后的处理
};

总结