> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/zh/essentials/images-embeds.md](/docs/manual/zh/essentials/images-embeds.md).

---
title: 图片与嵌入
description: 添加图片、视频和其他 HTML 元素
navigation:
  icon: i-lucide-image
seo:
  description: 使用 TockDocs 主题添加图片、视频和其他 HTML 元素
  title: 图片与嵌入
---

## Markdown

使用标准 Markdown 语法显示图片或视频。

### 图片

::code-preview
![Nuxt Social Image](https://nuxt.com/new-social.jpg)

#code

```mdc
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
```

::

或者使用本地图片

::code-preview
![日落时云海中白雪覆盖的山脉](https://ptg90phsi6rf8j7h.public.blob.vercel-storage.com/site/mountains.webp)

#code

```mdc
![日落时云海中白雪覆盖的山脉](https://ptg90phsi6rf8j7h.public.blob.vercel-storage.com/site/mountains.webp)
```

::

::note{to="https://image.nuxt.com/"}
TockDocs 底层会使用 `<NuxtImg>` 组件而非原生的 `img` 标签。
::

### 视频

使用内置的 `video` 组件嵌入本地或远程媒体文件。

```mdc
:video{autoplay controls loop src="/videos/demo.mp4"}
```