Bilder und Embeds
Responsive Bilder, Videos und Rich-Media-Einbettungen zur Verbesserung und Veranschaulichung Ihrer Dokumentation.
Bilder
Responsive Bilder mit automatischer Optimierung und interaktiver Zoom-Funktion.
](xph004) ](xph0004/assets/templates/nuxt/dashboard-dark.pngxph0004x
Wenn
@nuxt/image installiert ist, wird die <NuxtImg>-Komponente anstelle des nativen img-Tags für verbesserte Leistung und Optimierung verwendet.Zoom Bearbeiten
Standardmäßig unterstützen Bilder den interaktiven Zoom: Ein Klick auf ein Bild öffnet es in einer modalen Überlagerung mit fließenden Übergängen, sodass Benutzer Details genauer untersuchen können.
Um das Zoomen eines bestimmten Bildes zu verhindern, fügen Sie das Attribut :zoom="false" hinzu.
{:zoom="false"}
Größe
Bilder passen sich automatisch an ihren Container an, während das Seitenverhältnis beibehalten wird. Sie können die Größe bei Bedarf über Markdown-oder HTML-Attribute steuern.
{width="300"}
Iframes (nicht)
Integrieren Sie interaktive Inhalte wie CodeSandbox, Figma oder YouTube.
YouTube (englisch)
nicht
<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 (englisch)
nicht
<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 (englisch)
nicht
<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>