Astro前端框架的坑2-Astro特有的image语法

const blog = defineCollection({
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      cover: image(),
    }),
});

在defineCollection中schema可以转换成函数并带入astro内置的参数，后续astro会讲对应的得到的image图像通过image()函数进行处理。这个有点类似于python中的model字段验证的原理。
这样的好处是可以使用astro的image()函数来自动优化处理图片大小及展示，转换为webp等进行快速适应和加载。

🧩 { image } 是什么？

在定义内容集合的 schema 时，Astro 允许将 schema 定义为一个函数，该函数接收一个包含辅助函数的对象作为参数，这里就是image。这个对象中就包含了 image 函数。
在上述示例中，{ image } 是通过解构赋值从参数对象中提取 image 函数，在 schema 中使用 image() 来定义图像字段。

🖼️ image() 是什么？

image() 是 Astro 提供的一个辅助函数，用于在内容集合的 schema 中定义图像字段。它确保在 Markdown 文件的 frontmatter 中引用的图像路径有效，并在构建时进行验证。
示例：cover：image(),这表示 cover 字段应为一个有效的图像路径。Astro 会在构建时验证该路径是否指向一个存在的图像文件。

📝 示例：完整的内容集合配置

以下是一个完整的内容集合配置示例，展示了如何使用 { image } 和 image()：

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      pubDate: z.date(),
      author: z.string(),
      tags: z.array(z.string()),
      draft: z.boolean().optional(),
      cover: image(),
      coverAlt: z.string(),
    }),
});

export const collections = {
  blog,
};

在上述示例中，cover 字段使用了 image() 来定义图像字段，coverAlt 字段用于提供图像的替代文本。

📁 图像文件的存放位置

Astro 推荐将图像资源存放在 src/assets/ 目录中，以便进行图像优化和处理。比如将博客封面图像放在 src/assets/images/blog/ 目录下。

在 Markdown 文件的 frontmatter 中，可以使用相对于 Markdown 文件的路径引用图像：

---
title: "示例博客文章"
cover: "../../assets/images/blog/cover.jpg"
coverAlt: "博客封面图像描述"
---

🖼️ 在页面中使用图像

在 Astro 页面中，使用 astro:assets 提供的 组件来渲染图像：

---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

{posts.map((post) => (
  <article>
    <Image src={post.data.cover} alt={post.data.coverAlt} />
    <h2>{post.data.title}</h2>
  </article>
))}

组件会自动处理图像的优化，包括设置合适的 width 和 height 属性，以避免布局偏移（CLS）问题。