图片和嵌入
响应式图片、视频和富媒体嵌入，用于增强和说明您的文档。
图片
具有自动优化和交互式缩放功能的响应式图片。
| 属性 | 默认值 | 类型 |
|---|---|---|
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 p-4 sm:p-8'
},
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 p-4 sm:p-8'
},
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>