---
title: "图片与嵌入"
description: "学习在 Movk Nuxt Docs 文档中添加图片和视频媒体内容。支持标准 Markdown 图片语法和本地图片路径（底层使用 NuxtImg 优化），以及 :video 指令嵌入 HTML5 视频，支持自动播放、循环和控制条等属性配置。"
seo_title: "Media"
seo_description: "Add images and embedded videos to Movk Nuxt Docs pages with Markdown image syntax, Nuxt image optimization, and the video directive."
canonical_url: "https://docs.mhaibaraai.cn/docs/typography/media"
---
# 图片与嵌入

> 学习在 Movk Nuxt Docs 文档中添加图片和视频媒体内容。支持标准 Markdown 图片语法和本地图片路径（底层使用 NuxtImg 优化），以及 :video 指令嵌入 HTML5 视频，支持自动播放、循环和控制条等属性配置。

## Markdown

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

### 图片

```vue
<template>
  <img alt=Nuxt 社交图片 src=https://nuxt.com/new-social.jpg />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=![Nuxt 社交图片](https://nuxt.com/new-social.jpg)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  Nuxt 社交图片</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  https://nuxt.com/new-social.jpg</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

或者使用本地图片：

```vue
<template>
  <img alt=夕阳下云海中的雪山 src=/mountains.webp />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=![夕阳下云海中的雪山](/mountains.webp)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  夕阳下云海中的雪山</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /mountains.webp</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

> \[\!NOTE\]
> See: https://image.nuxt.com/
> 
> Movk Nuxt Docs 在底层会使用 
> 
> <NuxtImg>
> 
>  组件，而不是原生的 
> 
> <img>
> 
>  标签。

### 视频

<prose-code-preview>
<video :autoplay="true" :controls="true" :loop="true" src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>#default
```mdc
:video{autoplay controls loop src="https://media.w3.org/2010/05/sintel/trailer.mp4"}
```
</prose-code-preview>


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.