在文档中添加图像、嵌入视频，并通过 iframe 引入交互式内容。 文档仓库中的所有静态资源都会在你的域名的对应路径下自动提供服务。例如，如果你的仓库中有 /images/my-logo.png，则可通过 https://docs.yoursite.com/images/my-logo.png 访问该图像。
一张风景照片：前景有紫色花朵，远处是群山，蓝天上散布着云朵。

​
图片

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

​
基本图片语法

使用Markdown 语法在文档中添加图片： 
![描述图片的替代文本](/path/to/image.png)
请务必提供具有描述性的替代文本，以提升无障碍性和 SEO。替代文本应清晰说明图片所呈现的内容。
图片文件必须小于 20MB。对于更大的文件，请将其托管在 Amazon S3 或 Cloudinary 等 CDN 服务上。

​
HTML 图像嵌入

如需更精细地控制图像的展示，请使用 HTML <img> 标签： 
<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

​
禁用缩放功能

要禁用图片点击时的默认缩放，请添加 noZoom 属性： 
<img 
  src="/images/screenshot.png" 
  alt="Descriptive alt text"
  noZoom 
  height="200"
/>
要让图片可点击跳转，请将图片包裹在 a 标签中，并添加 noZoom 属性： 
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify logo"
    noZoom 
    height="100"
  />
</a>
位于链接（a）标签内的图片会自动显示指针样式的光标，提示其可点击。

​
浅色与深色模式的图片

要在浅色与深色主题下显示不同的图片，请使用 Tailwind CSS 类： 
<!-- 浅色模式图片 -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="浅色模式界面"
/>

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

​
视频

Mintlify 支持在 Markdown 中使用 HTML 标签，让你能灵活创建丰富的内容。
请务必在视频元素内提供备用文本内容，以便在不支持视频播放的浏览器中进行回退显示。

​
嵌入 YouTube

使用 iframe 元素嵌入 YouTube 视频： 
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

​
自托管视频

要使用自托管视频内容，请采用 HTML 的 <video> 元素： 
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

​
自动播放视频

要自动播放视频，请使用： 
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
使用 JSX 语法时，将由两个单词组成的属性写成驼峰命名：autoPlay、playsInline、allowFullScreen。

​
iframe

使用 iframe 元素嵌入外部内容： 
<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Frame 组件参考

了解如何使用 Frame 组件呈现图像。