---
title: "Images and embeds"
description: "Learn how to add image and video media to your Movk Nuxt Docs pages. Supports standard Markdown image syntax and local image paths (optimized under the hood with NuxtImg), as well as the :video directive for embedding HTML5 video with options such as autoplay, loop, and controls."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/media"
---
# Images and embeds

> Learn how to add image and video media to your Movk Nuxt Docs pages. Supports standard Markdown image syntax and local image paths (optimized under the hood with NuxtImg), as well as the :video directive for embedding HTML5 video with options such as autoplay, loop, and controls.

## Markdown

Use standard Markdown syntax to display images or videos.

### Images

```vue
<template>
  <img alt=Nuxt social image 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 social image](https://nuxt.com/new-social.jpg)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  Nuxt social image</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  https://nuxt.com/new-social.jpg</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

Or use a local image:

```vue
<template>
  <img alt=Snowy mountains in a sea of clouds at sunset src=/mountains.webp />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=![Snowy mountains in a sea of clouds at sunset](/mountains.webp)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  Snowy mountains in a sea of clouds at sunset</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 uses the 
> 
> <NuxtImg>
> 
>  component under the hood instead of the native 
> 
> <img>
> 
>  tag.

### Video

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



</video>

<template v-slot:code="">

```mdc
:video{autoplay controls loop src="https://media.w3.org/2010/05/sintel/trailer.mp4"}
```

</template>
</prose-code-preview>


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.