Skip to content
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

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

Merged
merged 4 commits into from
Apr 18, 2024
Merged

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f29788c
i18n(zh-cn): Update `images.mdx`
huyikai Apr 18, 2024
cbe9973
Update src/content/docs/zh-cn/guides/images.mdx
huyikai Apr 18, 2024
4e53694
i18n(zh-cn): Update `images.mdx`
huyikai Apr 18, 2024
3635046
Merge branch 'main' into 20240418-images.mdx
liruifengv Apr 18, 2024
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
31 changes: 17 additions & 14 deletions 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 @@ -40,12 +40,12 @@ import { Image } from 'astro:assets';
import localBirdImage from '../../images/subfolder/localBirdImage.png';
---
<Image src={localBirdImage} alt="一只鸟坐在蛋窝上。" />
<Image src="/images/bird-in-public-folder.jpg" alt="A bird." width="50" height="50" />
<Image src="https://example.com/remote-bird.jpg" alt="A bird." width="50" height="50" />
<Image src="/images/bird-in-public-folder.jpg" alt="一只鸟" width="50" height="50" />
<Image src="https://example.com/remote-bird.jpg" alt="一只鸟" width="50" height="50" />

<img src={localBirdImage.src} alt="一只鸟坐在蛋窝上。">
<img src="/images/bird-in-public-folder.jpg" alt="A bird.">
<img src="https://example.com/remote-bird.jpg" alt="A bird.">
<img src="/images/bird-in-public-folder.jpg" alt="一只鸟">
<img src="https://example.com/remote-bird.jpg" alt="一只鸟">
```

要从 `src/` 文件夹中动态导入图像，请参阅下面的操作指南：
Expand Down Expand Up @@ -495,11 +495,11 @@ export default defineConfig({

<!-- 存储在 src/assets/ 中的本地图像 -->
<!-- 使用相对路径或者导入别名 -->
![A starry night sky.](../assets/stars.png)
![繁星点点的夜空](../assets/stars.png)

<!-- 存储在 public/images/ 中的图像 -->
<!-- 使用相对 public/ 的文件路径-->
![A starry night sky.](/images/stars.png)
![繁星点点的夜空](/images/stars.png)

<!-- 其他服务上的远程图像 -->
<!-- 使用图像的完成 url -->
Expand All @@ -525,15 +525,18 @@ import rocket from '../assets/rocket.png';

# 我的 MDX 页面

// 存储在同一文件夹中的本地图像
![太空中的火箭飞船](houston.png)

// 存储在 src/assets/ 中的本地图像
<Image src={rocket} alt="A rocketship in space." />
<img src={rocket.src} alt="A rocketship in space." />
![A rocketship in space](../assets/rocket.png)
<Image src={rocket} alt="太空中的火箭飞船" />
<img src={rocket.src} alt="太空中的火箭飞船" />
![太空中的火箭飞船](../assets/rocket.png)

// 存储在 public/images/ 中的图像
<Image src="/images/stars.png" alt="A starry night sky." />
<img src="/images/stars.png" alt="A starry night sky." />
![A starry night sky.](/images/stars.png)
<Image src="/images/stars.png" alt="繁星点点的夜空" />
<img src="/images/stars.png" alt="繁星点点的夜空" />
![繁星点点的夜空](/images/stars.png)

// 其他服务上的远程图像
<Image src="https://example.com/images/remote-image.png" />
Expand Down Expand Up @@ -839,10 +842,10 @@ import rocket from '../images/rocket.svg';
# 我的 Markdown 页面

<!-- 现在可以使用本地图像 -->
![A starry night sky.](../../images/stars.png)
![繁星点点的夜空](../../images/stars.png)

<!-- 将你的图像放在你的内容旁边！ -->
![A starry night sky.](./stars.png)
![繁星点点的夜空](./stars.png)
```

如果你需要对图像属性做更多的控制，我们建议使用 `.mdx` 文件格式，除了 Markdown 语法，你还可以使用 Astro 的 `<Image />` 组件或 JSX `<img />` 标签。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 为 Astro 添加对 MDX 的支持。
Expand Down
Loading