颜色模式图片

一个在亮色和暗色模式下具有不同图片源的图像元素。

用法

ColorModeImage 组件在安装了 <NuxtImg> 组件时使用它，@nuxt/image否则会回退到 img。

浅色

深色

<template>
  <UColorModeImage
    light="https://picsum.photos/id/29/400"
    dark="https://picsum.photos/id/46/400"
    :width="200"
    :height="200"
  />
</template>

在浅色和深色模式之间切换以查看不同的图片

API

属性

属性	默认值	类型
`深色`		`string`
`浅色`		`string`
`alt`		`string`
`crossorigin`		`"" \| "anonymous" \| "use-credentials"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`loading`		`"lazy" \| "eager"`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`sizes`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`

此组件还支持所有原生 <img> HTML 属性。

更新日志

5b177— feat: 扩展原生 HTML 属性 (#5348)

5cb65— 特性：导入 @nuxt/ui-pro 组件

ColorModeButton

一个用于在浅色和深色模式之间切换的按钮。

ColorModeSelect

一个用于在系统、深色和浅色模式之间切换的选择器。