> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 图像与嵌入

> 添加图像、视频和 iframe

在文档中添加图像、嵌入视频，并通过 iframe 包含交互式内容。

文档代码库中的所有静态资源都会在你的域名下按相应路径自动提供。例如，如果你的代码库中有 `/images/my-logo.png`，则该图像可通过 `https://docs.yoursite.com/images/my-logo.png` 访问。

<Frame>
  <img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="前景盛开着紫色花朵，远处是群山，蓝天上点缀着疏散的云朵的风景照。" />
</Frame>

<div id="images">
  ## 图片
</div>

在文档中添加图片，以提供视觉上下文、示例或装饰。

<div id="basic-image-syntax">
  ### 基本图片语法
</div>

使用 [Markdown 语法](https://www.markdownguide.org/basic-syntax/#images)向文档添加图片：

```mdx
![描述图像的替代文本](/path/to/image.png)
```

<Tip>
  请始终为图片添加具有描述性的替代文本（alt），以提升无障碍访问和 SEO。替代文本应清晰描述图片内容。
</Tip>

图片文件必须小于 20 MB。对于更大的文件，请将其托管在 [Amazon S3](https://aws.amazon.com/s3) 或 [Cloudinary](https://cloudinary.com) 等 CDN 服务上。

<div id="html-image-embeds">
  ### HTML 图像嵌入
</div>

若需更灵活地控制图像显示，请使用 HTML `<img>` 标签：

```html
<img 
  src="/images/dashboard.png" 
  alt="主控制台界面"
  height="300"
  className="rounded-lg"
/>
```

<div id="disable-zoom-functionality">
  #### 禁用缩放功能
</div>

若要禁用图片点击时的默认缩放，请添加 `noZoom` 属性：

```html highlight="4"
<img 
  src="/images/screenshot.png" 
  alt="描述性替代文本"
  noZoom 
  height="200"
/>
```

<div id="link-images">
  #### 链接图片
</div>

要让图片可点击并跳转，将其包裹在 a（锚点）标签中，并添加 `noZoom` 属性：

```html
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify 徽标"
    noZoom 
    height="100"
  />
</a>
```

<Note>
  位于链接（a）标签内的图片会自动显示指针光标，表示它们可点击。
</Note>

<div id="light-and-dark-mode-images">
  #### 亮色与深色模式的图片
</div>

要在亮色和深色主题中显示不同的图片，请使用 Tailwind CSS 的类：

```html
<!-- 浅色模式图片 -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="浅色模式界面"
/>

<!-- 深色模式图片 -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="深色模式界面"
/>
```

<div id="videos">
  ## 视频
</div>

Mintlify 支持在 Markdown 中使用 [HTML 标签](https://www.markdownguide.org/basic-syntax/#html)，让你更灵活地打造丰富内容。

<Tip>
  请务必在 video 元素内提供后备文本内容，以便在不支持视频播放的浏览器中显示。
</Tip>

<div id="youtube-embeds">
  ### 嵌入 YouTube
</div>

使用 iframe 元素嵌入 YouTube 视频：

```html
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube 视频播放器"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>
```

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/4KzFe50RQkQ" title="YouTube 播放器" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<div id="self-hosted-videos">
  ### 自托管视频
</div>

对于自托管的视频内容，请使用 HTML `<video>` 元素：

```html
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="您的视频链接.com"
></video>
```

<div id="autoplay-videos">
  ### 自动播放视频
</div>

要启用视频自动播放，请使用：

```html
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
```

<Note>
  使用 JSX 语法时，将由两个单词组成的属性写成驼峰式命名：`autoPlay`、`playsInline`、`allowFullScreen`。
</Note>

<div id="iframes">
  ## iframes
</div>

使用 iframe 元素嵌入外部内容：

```html
<iframe 
  src="https://example.com/embed" 
  title="嵌入式内容"
  className="w-full h-96 rounded-xl"
></iframe>
```

<div id="related-resources">
  ## 相关资源
</div>

<Card title="Frame 组件参考" icon="frame" horizontal href="/zh/components/frames">
  了解如何使用 Frame 组件展示图像。
</Card>