2.2 图片与静态资源

两个位置，用途不同

位置	处理方式	适合
src/assets/	参与构建，会被压缩、加指纹	组件里引用的图
public/	原样拷贝到产物根目录	图标、需要固定网址的文件

public/ 里的文件按原路径访问，public/images/a.png 对应 /images/a.png。Markdown 里引用图片走这一条最直接。

不要写完整域名

<!-- 不要这样 -->
![图](https://example.com/images/a.png)

<!-- 这样 -->
![图](/images/a.png)

写完整域名的后果是：本地预览时图片从线上加载，你改了图也看不到效果，本地和线上还会不一致。

记得留尺寸

给 <img> 标上 width 和 height（或者用 CSS 固定宽高比），浏览器才能在图片加载前预留出位置。否则图片加载完成时页面会向下跳一下，阅读体验很差。

大图要懒加载

首屏之外的图片加上 loading="lazy"。注意首屏图片不要加，那会让它延迟到布局完成后才开始加载，反而更慢。