媒体

更新于 2026年11月1日

图片就是普通的 <img> 元素，会缩放到内容宽度。用 <figure> 包裹并加上 <figcaption> 即可添加图注。

内部图片

引用项目中的图片；所有非页面文件都会复制到输出中的相同路径：

<img src="/screenshots/docs.webp" alt="An htmlpress docs page">

![An htmlpress docs page](/screenshots/docs.webp)

相对的 src、srcset 或 poster 从页面的源文件解析，因此无论是在页面的文件夹 URL、语言前缀之下，还是另一个 <meta name="path"> 处，它都仍然有效。

渲染为：

引用外部 URL 的图片：

<img src="https://picsum.photos/seed/htmlpress/800/300" alt="Placeholder">

![Placeholder](https://picsum.photos/seed/htmlpress/800/300)

渲染为：

占位图

使用 data URI 直接嵌入小图片：

<img src="data:image/png;base64,iVBORw0KGgo…" alt="banner">

![banner](data:image/png;base64,iVBORw0KGgo…)

渲染为：

在 <img> 上设置 data-theme="light" 或 data-theme="dark"，图片就只在对应主题下显示，既跟随页眉的主题切换，也跟随系统设置；Livemark 风格的 src 结尾 #light 和 #dark 同样有效。把两张图片并排放置：

<img src="/screenshots/docs.webp" alt="The docs" data-theme="light">
<img src="/screenshots/docs-dark.webp" alt="The docs" data-theme="dark">

![The docs](/screenshots/docs.webp#light)
![The docs](/screenshots/docs-dark.webp#dark)

渲染为（切换主题即可看到变化）：

浅色模式下的文档站点深色模式下的文档站点

页面的 Markdown 副本只保留浅色图片。

页面中的每张图片点击后都会全屏打开，被链接包住的除外；点击任意位置即可关闭。内部图片、外部图片和 base64 图片都适用。

<img src="screenshot.png" alt="The docs site">

![The docs site](screenshot.png)

渲染为（点击试试）：

htmlpress 组件页面，展示四种颜色的提示框

<htmlpress-video type="youtube" url> 播放其 url 指向的视频（支持 watch、youtu.be、embed、shorts 或 live URL）；没有脚本时它仍是一个链接：

<htmlpress-video type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></htmlpress-video>

::video{type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"}

渲染为：

<htmlpress-audio type="soundcloud" url> 播放其 url 指向的曲目；没有脚本时它仍是一个链接：

<htmlpress-audio type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"></htmlpress-audio>

::audio{type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"}

渲染为：

用 ❤ 和 Htmlpress 构建