图片

在 Astro 项目中，有很多种在网站中使用图片的方式。无论是用存储在项目中的图片，还是链接外部图片，亦或从像 CMS（内容管理系统）或 CDN（内容分发网络）这样的地方加载图片，都没问题！

你可以在 .astro 文件中使用标准的 HTML <img> 或 <img /> 元素来展示图片，同时也支持所有 HTML 图片属性。

src 属性是必需的，其格式取决于图像的存储位置以及你是否启用了对资源的实验性支持：

---
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="外空中的一架火箭。"/>

可以在 .md 文件中使用 Markdown 标准语法 ![]()，或 HTML 标准语法 <img> 标签，来调用位于 public/ 文件夹下或其它服务器上的图片。

如果你无法将图片保留在 public/ 中，我们建议启用 资源的实验性支持 (EN), 或使用 .mdx 文件格式，该格式允许你将导入的组件与类似 Markdown 的语法结合起来。使用 MDX 集成 向 Astro 添加对 MDX 的支持。

# 我的 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 文件中使用标准 Markdown ![]() 语法或 JSX 的 <img /> 标签来显示 public/ 文件夹或远程服务器中的图片。

此外，你也可以导入和使用位于项目 src/ 目录中的图像，就像在 Astro 组件中一样。

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 框架组件（例如 React、Svelte）中添加图像时，请使用适合该框架的图像语法。

存储在 src/中的图像可以由组件（.astro，.mdx和其他 UI 框架）使用，但不能在 Markdown 文档中使用。

如果您必须使用 Markdown 文档，我们建议你将图像保存在 [‘public/’]（#public） 中或 远程 存储他们。

从任何组件文档中的 相对文档路径 或 导入别名 导入它们，然后像使用 src属性一样使用。

---
// Access images in `src/images/`
import logo from '../images/logo.png';
---
<img src={logo} width="40" alt="Astro 的图标" />

存储在 public/ 中的图像可以被组件（.astro，.mdx和其他UI框架）和Markdown文档使用。

然而，位于 /public 目录中的文件始终按原样提供或复制，不进行任何处理。如果你在 Markdown 文件之外使用图像，我们建议尽可能将本地图像保存在 src/ 中，以便 Astro 对其进行转换、优化和打包。

src 属性是 相对于 public 文件夹的。在 Markdown 中，你可以使用 ![]() 表示。

---
// 存取放在 `public/images/` 里的图片
---
<img src="/images/logo.png" />

请参阅 资源（实验性） (EN) 指南，了解如何启用 /assets/ 文件夹的实验性用法。

这将需要你更新现有图片，删除当前的 Astro 图片集成，并且还需要额外的手动更改以利用其某些新功能。

有关在 Astro v2 中使用 @astrojs/image 的文档，请参阅 @astrojs/image 文档

Image CDN 可与 Astro 配合使用，可将图片的完整网址作为 <img> 标签中的 src 属性或 Markdown 标记

如果 CDN 提供了 Node.js SDK ，则可以在项目中使用它。例如，Cloudinary 的 SDK 可以生成带有相应 src 属性 的 <img> 标签。

并非所有用户都能以相同的方式查看图片，因此在使用图片时可访问性是一个特别重要的问题。使用 alt 属性为图片提供 描述性替代文本。

此属性对于映像集成的 <Image /> 和 <Picture/> 组件是必需的，如果未提供替代文本，这些组件将引发错误。

如果图像只是装饰性的（即无助于理解页面）请设置 alt=""，以便屏幕阅读器知道忽略该图像。

除了官方的 @astrojs/image 集成外，社区还开发了社区图片集成，用于处理和优化 Astro 项目中的图片。