1.8 KiB
title, description, navigation
| title | description | navigation | ||
|---|---|---|---|---|
| Images and Embeds | Add image, video, and other HTML elements |
|
Image
Using Markdown
Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
::code-preview
#code
::
::note
If @nuxt/image is installed, the <NuxtImg> component will be used instead of the native img tag.
::
Using Embeds
Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
::code-preview
{height="150"}
#code
:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
::
Embeds and HTML elements
Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
::code-preview
class: "[&>div]:*:w-full"
:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
#code
:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
::