# 媒体
> 图片、可缩放的图片，以及 YouTube 和 SoundCloud 嵌入。
图片就是普通的 `![]()
` 元素，会缩放到内容宽度。用 `` 包裹并加上 `` 即可添加图注。
## 内部图片
引用项目中的图片；所有非页面文件都会复制到输出中的相同路径：
**HTML**
```html
```
**Markdown**
```md
```
相对的 `src`、`srcset` 或 `poster` 从页面的源文件解析，因此无论是在页面的文件夹 URL、语言前缀之下，还是另一个 `` 处，它都仍然有效。
渲染为：
一个 htmlpress 文档页面。
## 外部图片
引用外部 URL 的图片：
**HTML**
```html
```
**Markdown**
```md
```
渲染为：
## Base64 图片
使用 data URI 直接嵌入小图片：
**HTML**
```html
```
**Markdown**
```md
```
渲染为：
## 主题图片
在 `![]()
` 上设置 `data-theme="light"` 或 `data-theme="dark"`，图片就只在对应主题下显示，既跟随页眉的主题切换，也跟随系统设置；Livemark 风格的 `src` 结尾 `#light` 和 `#dark` 同样有效。把两张图片并排放置：
**HTML**
```html
```
**Markdown**
```md
```
渲染为（切换主题即可看到变化）：
页面的 Markdown 副本只保留浅色图片。
## 图片缩放
页面中的每张图片点击后都会全屏打开，被链接包住的除外；点击任意位置即可关闭。内部图片、外部图片和 base64 图片都适用。
**HTML**
```html
```
**Markdown**
```md
```
渲染为（点击试试）：
## 视频块
`` 播放其 `url` 指向的视频（支持 `watch`、`youtu.be`、`embed`、`shorts` 或 `live` URL）；没有脚本时它仍是一个链接：
**HTML**
```html
```
**Markdown**
```md
::video{type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"}
```
渲染为：
## 音频块
`` 播放其 `url` 指向的曲目；没有脚本时它仍是一个链接：
**HTML**
```html
```
**Markdown**
```md
::audio{type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"}
```
渲染为：