Images et embeds
Des images, des vidéos et des médias enrichis adaptés pour améliorer et illustrer votre documentation.
images
Images réactives avec optimisation automatique et fonctionnalité de zoom interactif.
Si
@nuxt/image est installé, le composant <NuxtImg> sera utilisé à la place de la balise native img pour améliorer les performances et l'optimisation.Zoom
Par défaut, les images prennent en charge le zoom interactif: cliquer sur une image l'ouvre dans une superposition modale avec des transitions fluides, permettant aux utilisateurs d'examiner les détails de plus près.
Pour éviter de zoomer sur une image spécifique, ajoutez l'attribut :zoom="false".
{:zoom="false"}
taille
Les images s'adaptent automatiquement à leur conteneur tout en conservant le format d'aspect. Vous pouvez contrôler le dimensionnement par le biais d'attributs Markdown ou HTML si nécessaire.
{width="300"}
Iframes
Intégrez facilement du contenu interactif comme CodeSandbox, Figma ou YouTube.
vidéo
<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; width: 100%;"></iframe>
CodeSandbox écrit
<iframe src="https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5" 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; width: 100%;"></iframe>
figma
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px;" src="https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1" allowfullscreen></iframe>