Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions src/content/docs/zh-cn/guides/images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ i18nReady: true
import Since from '~/components/Since.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro 为你提供了多种在网站上使用图像的方法,无论它们是本地存储在你的项目内,还是链接到外部 URL ,或者在 CMS 或 CDN 中管理的!
Astro 为你提供了多种在网站上使用图像的方法,无论它们是本地存储在你的项目内,还是链接到外部 URL,或者在 CMS 或 CDN 中管理的!

## 在哪里存储图像

Expand Down Expand Up @@ -377,7 +377,7 @@ const blogCollection = defineCollection({
schema: ({ image }) => z.object({
title: z.string(),
cover: image().refine((img) => img.width >= 1080, {
message: "封面图片必须至少1080像素宽!",
message: "封面图片必须至少 1080 像素宽!",
}),
coverAlt: z.string(),
}),
Expand Down Expand Up @@ -697,3 +697,22 @@ import rocket from '../images/rocket.svg';
你现在可以在 frontmatter 中声明一个与内容集合条目相关联的图像,例如博客文章的封面图像,使用相对于当前文件夹的路径:

内容集合中新的 `image` 助手可让你使用 Zod 验证图像元数据。了解更多关于 [如何在内容集合中使用图像](/zh-cn/guides/images/#内容集合中的图像) 的内容。

### 在 Astro v3.0 中导航图像导入

在 Astro v3.0 中,如果你需要保留旧的图像导入方式,并要求图像的 URL 以字符串表示,你可以在导入图像时在图像路径的末尾添加 `?url`。例如:

```astro title="src/pages/blog/MyImages.astro"
---
import Sprite from '../assets/logo.svg?url';
---
<svg>
<use xlink:href={Sprite + '#cart'} />
</svg>
```

这种方法可以确保获得 URL 字符串。请记住,在开发过程中,Astro 使用 `src/` 路径,但在构建过程中,它会生成类似于 `/_astro/cat.a6737dd3.png` 的哈希路径。

如果你更喜欢直接使用图像对象本身,你可以访问 `.src` 属性。这种方法非常适合用于管理图像尺寸以适应 Core Web Vitals 指标和避免 CLS。

如果你正在过渡到新的导入方式,将 `?url` 和 `.src` 方法结合起来可能是一种无缝处理图像的正确方法。