图片和嵌入
响应式图片、视频和富媒体嵌入，以增强和说明您的文档。
图片
具有自动优化和交互式缩放功能的响应式图片。
| 属性 | 默认值 | 类型 |
|---|---|---|
src |
| |
alt |
| |
宽度 | ||
高度 |
| |
缩放 |
|
点击图片放大 |
ui |
|
app.config.ts
export default defineAppConfig({
ui: {
prose: {
img: {
slots: {
base: 'rounded-md w-full',
overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none',
zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
img: {
slots: {
base: 'rounded-md w-full',
overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none',
zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
]
})
缩放
默认情况下，图片支持交互式缩放：点击图片会在模态叠加层中打开它，并带有平滑过渡，允许用户更仔细地查看细节。
要防止特定图片缩放，请添加 :zoom="false" 属性。
{:zoom="false"}
尺寸
图片会自动适应其容器，同时保持宽高比。您可以在需要时通过 Markdown 或 HTML 属性控制尺寸。
{width="300"}
Iframe
轻松嵌入交互式内容，如 CodeSandbox、Figma 或 YouTube。
YouTube
<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
<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>