i18n(zh-cn): Translate images.mdx (#4314)

Co-authored-by: Camol <[email protected]> Co-authored-by: Xiaoyue Lin <[email protected]>
withastro · Aug 25, 2023 · 4983774 · 4983774
1 parent 6910209
commit 4983774
Show file tree

Hide file tree

Showing 12 changed files with 745 additions and 68 deletions.
diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx
diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-gatsby.mdx
@@ -87,8 +87,6 @@ Gatsby 和 Astro 共享一些相似性，这将帮助你迁移你的项目：
 
 - **@astrojs/react**：在你的新 Astro 站点中重用一些现有的 React UI 组件，或者继续使用 React 组件。
 
-- **@astrojs/image**：用 Astro 自己的图像优化组件替换 Gatsby 的 Image 插件。(实验性的：仅在 `.astro` 和 `.mdx` 文件中工作。)
-
 - **@astrojs/mdx**：从你的 Gatsby 项目中带来现有的 MDX 文件，或者在你的新 Astro 站点中使用 MDX。
 
 ### 将你的代码放在 `src` 中
@@ -320,41 +318,33 @@ Gatsby 中使用 `gatsby-browser.js` 中的 CSS 导入实现全局样式。在 A
 
 ### Gatsby 图像插件转换为 Astro
 
-:::note
-Astro v3.0 将包含一个新的 `astro:assets` 模块，并将弃用现有的 `@astrojs/image` 集成。
-
-目前已经可以通过实验性标志访问 `astro:assets`，并且这是开始新 Astro 项目的推荐方式。如果你正在迁移到 Astro pre-v3.0，我们建议[启用实验标志来使用资产](/zh-cn/guides/images/)作为图像解决方案。
-:::
-
-将 Gatsby 的 `<StaticImage />` 和 `<GatsbyImage />` 组件与 [Astro 自己的图像集成组件](/zh-cn/guides/images/) 或适当的标准 HTML `<img>` / JSX `<img />` 标签相互转换。
+根据情况在你的 React 组件中将 Gatsby 的 `<StaticImage />` 和 `<GatsbyImage />` 组件转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` / JSX `<img />` 标签](/zh-cn/guides/images/#框架组件中的图像)。
 
 ```astro title="src/pages/index.astro"
 ---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
 ---
-<Image src={localImage} alt="The Astro Logo" />
-<img src={rocket} alt="A rocketship in space.">
+<Image src={rocket} alt="太空中的火箭飞船。" />
+<img src={rocket.src} alt="太空中的火箭飞船。">
 ```
 
-Astro 的 `<Image />` 和 `<Picture />` 组件是实验性的，并且目前只在 `.astro` 和 `.mdx` 文件中工作。查看这些组件可用的[完整组件属性列表](/zh-cn/guides/images/)，并注意其中几个会与 Gatsby 的属性不同。
+Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性)，并注意它与 Gatsby 的属性有一些不同。
 
-要继续在 Markdown（`.md`）文件中使用标准 Markdown 语法（`![]()`）使用本地图像，请将图像移动到你的 `public/` 文件夹中。你可能需要更新链接到相对 URL。你也可以在这些文件中使用标准的 `<img>` 标签。注意这些 [在 `public/` 中的图像不会被 Astro 优化](/zh-cn/guides/images/)。
+要继续使用标准 Markdown 语法 (`![]()`) [在 Markdown (`.md`) 文件中使用图像](/zh-cn/guides/images/#markdown-文件中的图像)，你可能需要更新链接。对于本地图像，不支持在 `.md` 文件中直接使用 HTML `<img>` 标签，必须转换为 Markdown 语法。
 
 ```md
 <!-- src/pages/post-1.md -->
 
-# My Markdown Page
+# 我的 Markdown 页面
 
-<!-- Local image stored at public/assets/stars.png -->
-![A starry night sky.](/assets/stars.png)
-<img src="/assets/stars.png" alt="A starry night sky.">
+<!-- 存储在 src/assets/stars.png 的本地图片 -->
+![A starry night sky.](../assets/stars.png)
 ```
 
 在 React（`.jsx`）组件中，使用标准的 JSX 图像语法（`<img />`）。Astro 不会优化这些图像，但你可以安装和使用 NPM 包以获得更大的灵活性。
 
-你可以在 Images Guide 中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息。
+你可以在图像指南中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息。
 
 ### Gatsby GraphQL 转换为 Astro
 

diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nextjs.mdx
@@ -83,8 +83,6 @@ Next.js 和 Astro 有一些相似之处，可以帮助你迁移你的项目：
 
 - **@astrojs/react**：在你的新 Astro 网站上重用一些现有的 React UI 组件，或者继续用 React 组件来编写。
 
-- **@astrojs/image**：用 Astro 自己的图片优化组件来替代 Next 的 Image。（实验：只适用于`.astro`和`.mdx`文件）。
-
 - **@astrojs/mdx**：将现有的 Next 项目中的 MDX 文件导入，或在新的 Astro 站点中使用 MDX。
 
 ### 将源码放在`src`目录内
@@ -418,31 +416,24 @@ const randomUser = data.results[0];
 查看更多关于 [在 Astro 中设计样式](/zh-cn/guides/styling/) 的信息。
 
 ### 转换 Next 的 图像插件到 Astro
-
-:::note
-Astro v3.0 将包括一个新的 `astro:assets` 模块，并将弃用现有的 `@astrojs/image` 集成。
-
-访问 `astro:assets` 目前可以在实验标志下使用，并且是开始新 Astro 项目的推荐方式。如果你要迁移到 Astro pre-v3.0，我们建议你 [启用实验标志以使用 assets](/zh-cn/guides/images/) 作为图像解决方案。
-:::
-
-用[ Astro 自己的图片集成组件](/zh-cn/guides/images/)，或用标准的HTML`<img>`来转换任何Next`<Image />`组件。请看[组件属性的完整列表](/zh-cn/guides/images/)，可用于Astro的`<Image />`和`<Picture />`组件，注意有几个属性和Next不同。
+
+根据情况在你的 React 组件中将任何 Next 的 `<Image />` 组件转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` / JSX `<img />` 标签](/zh-cn/guides/images/#框架组件中的图像)。
+
+Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性)，并注意它与 Next 的属性有一些不同。
 
 ```astro title="src/pages/index.astro"
 ---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
 ---
-<Image src={localImage} alt="The Astro Logo" />
-<img src={rocket} alt="A rocketship in space.">
+<Image src={rocket} alt="太空中的火箭飞船。" />
+<img src={rocket.src} alt="太空中的火箭飞船。">
 ```
 
 在React（`.jsx`）组件中，使用标准的JSX的图片语法（`<img />`）。Astro不会优化这些图片，但你也可以安装和使用NPM包以提升灵活性。
 
 你可以在图像指南中了解更多关于[在Astro中使用图像](/zh-cn/guides/images/)的信息。
 
-
-
 ## 示例: 数据请求
 
 下面是一个Next.js Pokédex数据获取转换为Astro的例子。

diff --git a/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/zh-cn/guides/migrate-to-astro/from-nuxtjs.mdx
@@ -85,8 +85,6 @@ Nuxt 和 Astro 有一些相似之处，这些相似性能够帮助你完成迁
 
 - **@astrojs/vue**：你可以在新的 Astro 网站中重用一些现有的 Vue UI 组件，或者继续使用 Vue 组件编写。
 
-- **@astrojs/image**：用 Astro 自己的图像优化组件来替代 Nuxt 的图像插件。
-
 - **@astrojs/mdx**：从你的 Nuxt 项目将现有的 MDX 文件带入，或者在新的 Astro 网站中使用 MDX。
 
 ### 将你的源码放入 `src` 中
@@ -489,29 +487,22 @@ p {
 
 ### Nuxt 图片插件迁移到 Astro
 
-:::note
-Astro v3.0 将包括一个全新的 `astro:assets` 模块，并将废弃现有的 `@astrojs/image` 集成。
-
-目前通过实验性标志可以访问 `astro:assets` ，这也是开始新 Astro 项目的推荐方式。如果你需要迁移到 Astro v3.0之前的版本，我们建议 [启用实验性标志来使用资源](/zh-cn/guides/images/) 作为图像的解决方案。
-:::
-
-将任何 [Nuxt `<nuxt-img/>` 或 `<nuxt-picture/>` 组件](https://image.nuxtjs.org/components/nuxt-img) 转换为 [Astro 的图像集成组件](/zh-cn/guides/images/)，或者转换为标准的 HTML `<img>` 标签。
+根据情况在你的 Vue 组件中将任何 [Nuxt 的`<nuxt-img/>` 或者 `<nuxt-picture/>` 组件](https://image.nuxtjs.org/components/nuxt-img) 转换为 [Astro 自己的图像集成组件](/zh-cn/guides/images/#image--astroassets) 或者转化成 [标准的 HTML `<img>` 标签](/zh-cn/guides/images/#框架组件中的图像) 或者 `<picture>` 标签。
 
-请查看 Astro 的 `<Image />` 和 `<Picture />` 组件的 [完整属性列表](/zh-cn/guides/images/)，并且注意其中几个属性与 Nuxt 的属性有所不同。
+Astro 的 `<Image />` 组件只能在 `.astro` 和 `.mdx` 文件中工作。查看该组件可用的[完整组件属性列表](/zh-cn/guides/images/#属性)，并注意它与 Nuxt 的属性有一些不同。
 
 ```astro title="src/pages/index.astro"
 ---
-import { Image } from '@astrojs/image/components';
-import localImage from "../images/brand/logo.png";
-import rocket from '../images/rocket.svg';
+import { Image } from 'astro:assets';
+import rocket from '../assets/rocket.png';
 ---
-<Image src={localImage} alt="The Astro Logo" />
-<img src={rocket} alt="A rocketship in space.">
+<Image src={rocket} alt="太空中的火箭飞船。" />
+<img src={rocket.src} alt="太空中的火箭飞船。">
 ```
 
 在你的 Astro 应用中的 Vue (`.vue`) 组件中，使用标准的 JSX 图像语法 (`<img />`)。Astro 不会对这些图像进行优化，但你可以安装和使用 NPM 包以获得更大的灵活性。
 
-你可以在 [图像在 Astro 中的使用指南](/zh-cn/guides/images/) 中了解更多信息。
+你可以在图像指南中了解更多关于 [在 Astro 中使用图像](/zh-cn/guides/images/) 的信息。
 
 ## 指导示例：请查看以下步骤：
 

diff --git a/src/content/docs/zh-cn/reference/configuration-reference.mdx b/src/content/docs/zh-cn/reference/configuration-reference.mdx
@@ -646,6 +646,14 @@ export default defineConfig({
 }
 ```
 
+### image.domains
+
+占位
+
+### image.remotePatterns
+
+占位
+
 ### image.domains（实验性）
 
 <p>

diff --git a/src/content/docs/zh-cn/reference/errors/expected-image-options.mdx b/src/content/docs/zh-cn/reference/errors/expected-image-options.mdx
@@ -21,4 +21,4 @@ const optimizedImage = await getImage({src: myImage, width: 300, height: 300});
 
 **另请参阅：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
diff --git a/src/content/docs/zh-cn/reference/errors/expected-image.mdx b/src/content/docs/zh-cn/reference/errors/expected-image.mdx
@@ -24,4 +24,4 @@ import myImage from "../assets/my_image.png";
 
 **另请参阅：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
diff --git a/src/content/docs/zh-cn/reference/errors/image-missing-alt.mdx b/src/content/docs/zh-cn/reference/errors/image-missing-alt.mdx
@@ -14,5 +14,7 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/
 
 **请参阅：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
+- [Image 组件](/zh-cn/guides/images/#image--astroassets)
+- [Image 组件的 alt 属性](/zh-cn/guides/images/#alt-必须)
 
diff --git a/src/content/docs/zh-cn/reference/errors/local-image-used-wrongly.mdx b/src/content/docs/zh-cn/reference/errors/local-image-used-wrongly.mdx
@@ -25,4 +25,4 @@ import myImage from "../my_image.png";
 
 **请参阅：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
diff --git a/src/content/docs/zh-cn/reference/errors/markdown-image-not-found.mdx b/src/content/docs/zh-cn/reference/errors/markdown-image-not-found.mdx
@@ -14,4 +14,4 @@ Markdown 中的图像是相对于当前文件的。要引用与 `.md` 文件位
 
 **请参见：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
diff --git a/src/content/docs/zh-cn/reference/errors/missing-image-dimension.mdx b/src/content/docs/zh-cn/reference/errors/missing-image-dimension.mdx
@@ -13,5 +13,6 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/
 
 **请参阅：**
 
-- [资源（实验性）](/zh-cn/guides/images/)
+- [图像](/zh-cn/guides/images/)
+- [图像组件#宽高是必须的](/zh-cn/guides/images/#width-和-height-对于-public-和远程图像是必须的)
 
diff --git a/src/content/docs/zh-cn/reference/image-service-reference.mdx b/src/content/docs/zh-cn/reference/image-service-reference.mdx
@@ -3,11 +3,7 @@ title: 图像服务 API
 i18nReady: true
 ---
 
-Astro [assets](/zh-cn/guides/images/) 旨在使任何图像优化服务都能轻松地在 Astro 上构建服务。
-
-:::caution
-图像服务 API 是 Astro v2.1 中引入的一个实验性功能。该 API 在标记为稳定之前可能会发生更改。
-:::
+`astro:assets` 旨在使任何图像优化服务都能轻松地在 Astro 上构建服务。
 
 ## 什么是图像服务？
 
@@ -228,9 +224,6 @@ export type ImageTransform = {
 import { defineConfig } from "astro/config";
 
 export default defineConfig({
-  experimental: {
-    assets: true,
-  },
   image: {
     service: {
       entrypoint: "your-entrypoint", // 'astro/assets/services/squoosh' | 'astro/assets/services/sharp' | string,
-Original file line number
+Diff line change
@@ Expand Up / @@ -646,6 +646,14 @@ export default defineConfig({ @@
     }
     ```
+    ### image.domains
+    占位
+    ### image.remotePatterns
+    占位
     ### image.domains（实验性）
     <p>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,4 +21,4 @@ const optimizedImage = await getImage({src: myImage, width: 300, height: 300});

		另请参阅：

		- [资源（实验性）](/zh-cn/guides/images/)
		- [图像](/zh-cn/guides/images/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,4 +24,4 @@ import myImage from "../assets/my_image.png";

		另请参阅：

		- [资源（实验性）](/zh-cn/guides/images/)
		- [图像](/zh-cn/guides/images/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,4 +25,4 @@ import myImage from "../my_image.png";

		请参阅：

		- [资源（实验性）](/zh-cn/guides/images/)
		- [图像](/zh-cn/guides/images/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,4 +14,4 @@ Markdown 中的图像是相对于当前文件的。要引用与 `.md` 文件位

		请参见：

		- [资源（实验性）](/zh-cn/guides/images/)
		- [图像](/zh-cn/guides/images/)