图像与嵌入

添加图像、视频和 iframe

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

​

图像

向文档添加图像，以提供可视化的上下文、示例或装饰。

​

基本图片语法

使用Markdown 语法向文档中添加图片：

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

请务必添加具有描述性的替代文本，以提升无障碍性和 SEO（搜索引擎优化）。替代文本应清楚描述图像所呈现的内容。

图像文件必须小于 20 MB。对于更大的文件，请将其托管在 CDN 服务上，例如 Amazon S3 或 Cloudinary。

​

HTML 图像嵌入

若需更精确地控制图像的显示效果，请使用 HTML 的 <img> 标签：

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

​

禁用缩放功能

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

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

​

链接图片

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

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify 徽标"
    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 视频播放器"
  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="链接到您的视频.com"
></video>

​

自动播放视频

若需自动播放视频，请使用：

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

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

​

iframes

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

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

​

相关资源

Frame 组件参考

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