Astro 静态资源

Astro 里的静态资源分两类：

• 放在 public/ 里，原样输出的文件。
• 放在 src/ 里，通过 import 引入、由 Astro 处理的文件。

两者用法不同，下面分别说明。

public 目录里的资源

任何放进 public/ 的文件，最终都会出现在站点根目录，路径从 / 开始写。

<img src="/images/logo.png" alt="logo" />

适合放 favicon、已有的压缩图片、域名验证文件等「不需要 Astro 处理」的东西。

用 import 引入 src 里的资源

把图片放进 src/（如 src/assets/），用 import 引入，Astro 会自动做优化：压缩、生成多尺寸、加哈希文件名。

---
import logo from '../assets/logo.png';
---
<img src={logo.src} alt="logo" width={logo.width} height={logo.height} />

logo 是个对象，包含 src、width、height 等信息，Astro 还会自动给图片加懒加载属性，提升性能。

在 Markdown/MDX 里用图片

Markdown 里直接写相对路径即可，Astro 会解析并处理。

![示例图](../../assets/demo.png)

引入其他文件类型

除了图片，import 也能引入 JSON、SVG 等。

---
import data from '../data/config.json';
---
<p>{data.siteName}</p>

动态引入大量资源

如果图片较多，可以用 import.meta.glob 批量引入。

---
// 不加 eager 时，import.meta.glob 返回的是「懒加载函数」的映射，每个函数返回 Promise
const images = import.meta.glob('../assets/gallery/*.png');
const keys = Object.keys(images);
---
<!-- images[k]() 调用函数拿到模块，m.default 才是真正的资源对象 -->
{keys.map((k) => <img src={images[k]().then(m => m.default.src)} />)}

更常见的做法是把图片放进内容集合的数据里统一管理。