withastro · yanthomasdev · Aug 30, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/netlify.toml b/netlify.toml
@@ -83,6 +83,14 @@
     from = "/:lang/guides/client-side-routing"
     to = "/:lang/guides/view-transitions"
 
+  [[redirects]]
+    from = "/:lang/guides/assets"
+    to = "/:lang/guides/images"
+
+  [[redirects]]
+    from = "/:lang/guides/integrations-guide/image"
+    to = "/:lang/guides/images"
+
   [[redirects]]
     from = "/:lang/migration/0.21.0"
     to = "/:lang/guides/upgrade-to/v1"

diff --git a/src/content/docs/de/guides/images.mdx → old-translations/de/guides/images.mdx b/src/content/docs/de/guides/images.mdx → old-translations/de/guides/images.mdx
@@ -9,7 +9,7 @@ import Since from '~/components/Since.astro';
 Astro bietet dir verschiedene Möglichkeiten, Bilder auf deiner Website zu verwenden, ganz gleich, ob sie lokal in deinem Projekt gespeichert sind, auf anderen Quellen verlinkt werden oder in einem CMS oder CDN gespeichert sind!
 
 :::note[Assets verwenden (Experimentell)]
-Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/assets/).
+Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/images/).
 
 **Einige der folgenden Ratschläge sind nicht mit der experimentellen Flag kompatibel.**
 :::
@@ -38,7 +38,7 @@ import rocket from '../images/rocket.svg';
 
 Du kannst die Standard Markdown `![]()` Syntax oder die Standard HTML `<img>`-Tags in deinen `.md`-Dateien für Bilder verwenden, die sich in deinem `public/`-Ordner befinden, oder für Remote-Bilder auf einem anderen Server.
 
-Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/assets/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.
+Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/images/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.
 
 ```md
 <!-- src/pages/post-1.md -->
@@ -121,7 +121,7 @@ Das Attribut `src` ist **relativ zum öffentlichen Ordner**. In Markdown kannst
 
 ### `src/assets/` (experimentell)
 
-In der Anleitung [Assets (Experimentell)](/de/guides/assets/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.
+In der Anleitung [Assets (Experimentell)](/de/guides/images/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.
 
 Dazu musst du deine bestehenden Bilder aktualisieren, die aktuelle Astro-Bildintegration entfernen und zusätzliche manuelle Änderungen vornehmen, um einige der neuen Funktionen zu nutzen.
 
@@ -132,7 +132,7 @@ Die offizielle Bild-Integration von Astro bietet zwei verschiedene Astro-Kompone
 Nach der [Installation von `@astrojs/image`](/de/guides/integrations-guide/image/#installation) kannst du diese beiden Komponenten überall dort verwenden, wo du Astro-Komponenten verwenden kannst: in `.astro`- und `.mdx`-Dateien.
 
 :::note[Inkompatibel mit Assets]
-Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/assets/).
+Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/images/).
 :::
 
 ### `<Image />`

diff --git a/src/content/docs/fr/guides/images.mdx → old-translations/fr/images.mdx b/src/content/docs/fr/guides/images.mdx → old-translations/fr/images.mdx
diff --git a/old-translations/ja/images.mdx b/old-translations/ja/images.mdx
diff --git a/old-translations/zh-CN/guides/images.mdx b/old-translations/zh-CN/guides/images.mdx
@@ -0,0 +1,163 @@
+---
+title: 图片
+description: 学习如何在 Astro 项目中包含图片。
+i18nReady: true
+---
+import Since from '~/components/Since.astro';
+
+
+在 Astro 项目中，有很多种在网站中使用图片的方式。无论是用存储在项目中的图片，还是链接外部图片，亦或从像 CMS（内容管理系统）或 CDN（内容分发网络）这样的地方加载图片，都没问题！
+
+:::note[`astro:assets` (Experimental - coming in v3.0)]
+实验性 `astro:assets` 模块将在 `astro@3.0` 中默认启用.
+
+请按照 [资源（实验性）使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案！
+
+**下面的一些建议可能与实验性标志不兼容。如果你正在使用 `astro:assets` 请参考资源页面。**
+:::
+
+### 在 `.astro` 文件中
+
+你可以在 `.astro` 文件中使用标准的 HTML `<img>` 或 `<img />` 元素来展示图片，同时也支持所有 HTML 图片属性。
+
+src 属性是必需的，其格式取决于图像的存储位置以及你是否启用了对资源的实验性支持：
+
+```astro
+---
+// src/pages/index.astro
+import rocket from '../images/rocket.svg';
+---
+<!-- 位于其它服务器上的图片 -->
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
+
+<!-- 存储在 public/assets/stars.png 的本地图片 -->
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">
+
+<!-- 存储在 src/images/rocket.svg 的本地图片 -->
+<img src={rocket} alt="外空中的一架火箭。"/>
+```
+
+### 在 Markdown 文件中
+
+可以在 `.md` 文件中使用 Markdown 标准语法 `![]()`，或 HTML 标准语法 `<img>` 标签，来调用位于 `public/` 文件夹下或其它服务器上的图片。
+
+如果你无法将图片保留在 `public/` 中，我们建议启用 [资源的实验性支持](/zh-cn/guides/images/), 或使用 `.mdx` 文件格式，该格式允许你将导入的组件与类似 Markdown 的语法结合起来。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 向 Astro 添加对 MDX 的支持。
+```md
+<!-- src/pages/post-1.md -->
+
+# 我的 Markdown 页面
+
+<!-- 存储在 public/assets/stars.png 的本地图片 -->
+![一片繁星闪烁的夜空。](/assets/stars.png)
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">
+
+<!-- 位于其它服务器上的图片 -->
+![Astro](https://docs.astro.build/assets/logomark-light.png)
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
+```
+
+### 在 MDX 文件中
+
+你可以在 .mdx 文件中使用标准 Markdown `![]()` 语法或 JSX  的 `<img />` 标签来显示 `public/ ` 文件夹或远程服务器中的图片。
+
+此外，你也可以导入和使用位于项目 `src/` 目录中的图像，就像在 Astro 组件中一样。
+
+
+```mdx title="src/pages/post-1.mdx"
+
+import rocket from '../images/rocket.svg';
+
+# My MDX Page
+
+// 存放在项目中 src/images/rocket.svg 路径的图片
+<img src={rocket} alt="外空中的一架火箭。"/>
+
+// 存放在项目中 public/assets/stars.png 路径的图片
+![一片繁星闪烁的夜空。](/assets/stars.png)
+<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。" />
+
+// 位于其它服务器上的图片
+![Astro](https://docs.astro.build/assets/logomark-light.png)
+<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro" />
+```
+
+### UI 框架中的组件
+
+当在 [UI 框架组件](/zh-cn/core-concepts/framework-components/)（例如 React、Svelte）中添加图像时，请使用适合该框架的图像语法。
+
+
+
+## 存放图片的位置
+
+### `src/`
+
+存储在 `src/`中的图像可以由组件（`.astro`，`.mdx`和其他 UI 框架）使用，但不能在 Markdown 文档中使用。
+
+如果您必须使用 Markdown 文档，我们建议你将图像保存在 ['public/']（#public） 中或 [远程](#使用-cms-或-cdn-上的图片) 存储他们。
+
+从任何组件文档中的 **相对文档路径** 或 [导入别名](/zh-cn/guides/aliases/) 导入它们，然后像使用 `src`属性一样使用。
+
+```astro
+---
+// src/pages/index.astro
+
+// Access images in `src/images/`
+import logo from '../images/logo.png';
+---
+<img src={logo} width="40" alt="Astro 的图标" />
+```
+
+### `public/`
+
+存储在 `public/` 中的图像可以被组件（`.astro`，`.mdx`和其他UI框架）和Markdown文档使用。
+
+然而，位于 `/public` 目录中的文件始终按原样提供或复制，不进行任何处理。如果你在 Markdown 文件之外使用图像，我们建议尽可能将本地图像保存在 `src/` 中，以便 Astro 对其进行转换、优化和打包。
+
+`src` 属性是 **相对于 public 文件夹的**。在 Markdown 中，你可以使用 `![]()` 表示。
+
+```astro
+---
+// src/pages/index.astro
+
+// 存取放在 `public/images/` 里的图片
+---
+<img src="/images/logo.png" />
+```
+
+### `src/assets/` （实验性）
+
+请参阅 [资源（实验性）](/zh-cn/guides/images/) 指南，了解如何启用 `/assets/` 文件夹的实验性用法。
+
+这将需要你更新现有图片，删除当前的 Astro 图片集成，并且还需要额外的手动更改以利用其某些新功能。
+
+## Astro 的图片集成
+
+:::note[将在 v3.0 中弃用]
+Astro v3 将不再主动支持 [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) 集成
+
+我们建议你尽早删除它，并使用将内置在 `astro@3.0` 中的实验性 `astro:assets` 模块。
+
+请按照 [资源（实验性）使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案！
+
+**`astro:assets` 目前还不能完全替代 `@astrojs/image` ，但它正在被积极开发中。**
+:::
+
+有关在 Astro v2 中使用 `@astrojs/image` 的文档，请参阅 [`@astrojs/image` 文档](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)
+
+## 使用 CMS 或 CDN 上的图片
+
+Image CDN 可与 Astro 配合使用，可将图片的完整网址作为 `<img>` 标签中的 `src` 属性或 Markdown 标记
+
+如果 CDN 提供了 Node.js SDK ，则可以在项目中使用它。例如，[Cloudinary 的 SDK](https://cloudinary.com/documentation/node_integration) 可以生成带有相应 `src` 属性 的 ` <img>` 标签。
+
+## Alt Text
+
+并非所有用户都能以相同的方式查看图片，因此在使用图片时可访问性是一个特别重要的问题。使用 `alt` 属性为图片提供 [描述性替代文本](https://www.w3.org/WAI/tutorials/images/)。
+
+此属性对于映像集成的 `<Image />` 和 `<Picture/>` 组件是必需的，如果未提供替代文本，这些组件将引发错误。
+
+如果图像只是装饰性的（即无助于理解页面）请设置 `alt=""`，以便屏幕阅读器知道忽略该图像。
+
+## 社区开发的集成
+
+除了官方的 [`@astrojs/image`](/zh-cn/guides/integrations-guid/image/) 集成外，社区还开发了[社区图片集成](https://astro.build/integrations?search=images)，用于处理和优化 Astro 项目中的图片。
diff --git a/src/content/docs/ar/core-concepts/astro-components.mdx b/src/content/docs/ar/core-concepts/astro-components.mdx
@@ -286,7 +286,7 @@ const { title } = Astro.props
 
 - لا يدعمون frontmatter، أو الإستيراد على جانب الخادم (Server-side imports)، أو التعابير الديناميكية.
 - أي وسوم `<script>` تُركت غير مجمّعة، سيتم التعامل معها كما لو انها تحتوي على `is:inline`.
-- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/guides/images/#public) 
+- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/core-concepts/project-structure/#public) 
 
 :::note
 [عنصر `<slot />`](/ar/core-concepts/astro-components/#المداخل) الموجود داخل مكوّن HTML سيعمل كما يعمل في مكوّن أسترو. لإستخدام عنصر ["HTML Web Component Slot"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) بدلًا من ذلك، أضف  `is:inline` إلى عنصر `<slot />` الخاص بك.

diff --git a/src/content/docs/en/concepts/why-astro.mdx b/src/content/docs/en/concepts/why-astro.mdx
@@ -75,6 +75,6 @@ One of our favorite sayings is: **opt-in to complexity.** We designed Astro to r
 
 **Astro is an all-in-one web framework that comes with everything you need to build a website.** Astro includes a component syntax, file-based routing, asset handling, a build process, bundling, optimizations, data-fetching, and more. You can build great websites without ever reaching outside of Astro's core feature set.
 
-If you need more control, you can extend Astro with over [100+ integrations](https://astro.build/integrations/) like [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), [image optimizations](https://www.npmjs.com/package/@astrojs/image), and more. [Connect your favorite CMS](/en/guides/cms/) or [deploy to your favorite host](/en/guides/deploy/) with just a single command.
+If you need more control, you can extend Astro with over [100+ integrations](https://astro.build/integrations/) like [React](https://www.npmjs.com/package/@astrojs/react), [Svelte](https://www.npmjs.com/package/@astrojs/svelte), [Vue](https://www.npmjs.com/package/@astrojs/vue), [Tailwind CSS](https://www.npmjs.com/package/@astrojs/tailwind), [MDX](https://www.npmjs.com/package/@astrojs/mdx), and more. [Connect your favorite CMS](/en/guides/cms/) or [deploy to your favorite host](/en/guides/deploy/) with just a single command.
 
 Astro is UI-agnostic, meaning you can **Bring Your Own UI Framework (BYOF)**. React, Preact, Solid, Svelte, Vue, and Lit are all officially supported in Astro. You can even mix and match different frameworks on the same page, making future migrations easier and preventing project lock-in to a single framework.
diff --git a/src/content/docs/en/core-concepts/astro-components.mdx b/src/content/docs/en/core-concepts/astro-components.mdx
@@ -342,7 +342,7 @@ Astro supports importing and using `.html` files as components or placing these
 HTML components must contain only valid HTML, and therefore lack key Astro component features:
 - They don't support frontmatter, server-side imports, or dynamic expressions.
 - Any `<script>` tags are left unbundled, treated as if they had `is:inline`. 
-- They can only [reference assets that are in the `public/` folder](/en/guides/images/#public).
+- They can only [reference assets that are in the `public/` folder](/en/core-concepts/project-structure/#public).
 
 :::note
 A [`<slot />` element](/en/core-concepts/astro-components/#slots) inside an HTML component will work as it would in an Astro component. In order to use the [HTML Web Component Slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element instead, add `is:inline` to your `<slot>` element.