From 9051acd6592881098f06b48d0bd0d37f0c607634 Mon Sep 17 00:00:00 2001 From: 100gle Date: Fri, 1 Sep 2023 15:50:59 +0800 Subject: [PATCH 1/2] i18n(zh-cn): Update `guides/images.mdx` --- src/content/docs/zh-cn/guides/images.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx index 5648616903755..39742168673e3 100644 --- a/src/content/docs/zh-cn/guides/images.mdx +++ b/src/content/docs/zh-cn/guides/images.mdx @@ -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'; +--- + + + +``` + +这种方法可以确保获得 URL 字符串。请记住，在开发过程中，Astro 使用 `src/` 路径，但在构建过程中，它会生成类似于 `/_astro/cat.a6737dd3.png` 的哈希路径。 + +如果你更喜欢直接使用图像对象本身，你可以访问 `.src` 属性。这种方法非常适合用于管理图像尺寸以适应 Core Web Vitals 指标和避免 CLS。 + +如果你正在过渡到新的导入方式，将 `?url` 和 `.src` 方法结合起来可能是一种无缝处理图像的正确方法。 \ No newline at end of file From 780ebdda04532f664f0ed92f9bd8939fc527ad7c Mon Sep 17 00:00:00 2001 From: 100gle Date: Fri, 1 Sep 2023 15:51:54 +0800 Subject: [PATCH 2/2] chore: format content --- src/content/docs/zh-cn/guides/images.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx index 39742168673e3..ec3f35a6a5344 100644 --- a/src/content/docs/zh-cn/guides/images.mdx +++ b/src/content/docs/zh-cn/guides/images.mdx @@ -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 中管理的！ ## 在哪里存储图像 @@ -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(), }),