Skip to content

i18n(zh-cn): Update images.mdx #11478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 28, 2025
Merged

i18n(zh-cn): Update images.mdx #11478

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7fd192
i18n(zh-cn): Update `images.mdx`
Nin3lee Apr 17, 2025
a7ccb31
Merge branch 'main' into patch-2
yanthomasdev Apr 28, 2025
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
37 changes: 36 additions & 1 deletion src/content/docs/zh-cn/guides/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import RecipeLinks from "~/components/RecipeLinks.astro";
import { Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';

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

Astro 提供 [image](#使用-image--组件显示优化后的图像) 和 [picture](#使用-picture--组件创建响应式图像) 组件，[Markdown 图像语法](#markdown-文件中的图像) 处理，[SVG 组件](#svg-组件)，以及 [图像生成函数](#使用-getimage-生成图像) 来优化和/或转换你的图像。

在 `.astro` 或 Markdown 文件中，你可以选择使用原生 HTML 元素或 SVG 文件来引用图片，或者根据文件类型使用标准方式（例如在 MDX 和 JSX 中使用 `<img />`）。然而，Astro 不会对这些图片进行任何处理或优化。

<ReadMore>请参阅 [`<Image />`](/zh-cn/reference/modules/astro-assets/#image-) 和 [`<Picture />`](/zh-cn/reference/modules/astro-assets/#picture-) 组件的完整 API 参考。</ReadMore>

Expand Down Expand Up @@ -195,6 +199,7 @@ import myDog from '../../images/pets/local-dog.jpg';
```

#### `public/` 中的图像

对于位于 `public/` 中的图像，请使用图像相对于 public 文件夹的文件路径作为 `src` 值：

```astro '"/images/public-cat.jpg"'
Expand Down Expand Up @@ -268,6 +273,36 @@ export default defineConfig({
});
```

## SVG 组件

<p><Since v="5.7.0" /></p>

Astro 允许你导入 SVG 文件并将其作为 Astro 组件来使用。Astro 会将 SVG 内容内联到你的 HTML 输出中。

请引用任意本地 `.svg` 文件的默认导入。由于此导入会被视为 Astro 组件，因此必须使用与 [使用动态标签](/zh-cn/reference/astro-syntax/#动态标签) 时相同的约定（例如：大写）。

```astro title="src/components/MyAstroComponent.astro"
---
import Logo from './path/to/svg/file.svg';
---

<Logo />
```

你的 SVG 组件，例如 `<Image />` 或是其他 Astro 组件，无法直接在 UI 框架组件中使用，但可以在 `.astro` 组件中通过 [传递到框架组件](#框架组件中的图像) 的方式实现。

### SVG 组件属性

你可以传入诸如 `width`、`height`、`fill`、`stroke` 这样的属性，以及任何 [原生的 `<svg>` 元素](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg) 接受的其他属性。这些属性将自动应用于底层的 `<svg>` 元素。如果原有的 `.svg` 文件中已有某个将要传递给组件的属性，那么这个原有值将会被传入值覆盖。

```astro
---
import Logo from '../assets/logo.svg';
---

<Logo width={64} height={64} fill="currentColor" />
```

## 使用 CMS 或 CDN 中的图像

图像 CDN 与 [所有 Astro 图像选项](#astro-文件中的图像) 兼容。在 `<Image />` 组件、`<img>` 标签或 Markdown 表示法中，使用图像的完整 URL 作为 `src` 属性。对于远程图像的图像优化，还需要 [配置授权域或 URL 模式](#授权远程图像)。
Expand Down