ColorModeImage 이미지

밝은 모드와 어두운 모드에 대해 소스가 다른 이미지 요소.

Usage

ColorModeImage 구성 요소는 @nuxt/image를 설치할 때 <NuxtImg> 구성 요소를 사용하며 그렇지 않으면 img로 대체됩니다.

light

dark

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

밝은 모드와 어두운 모드 사이를 전환하여 다른 이미지를 확인합니다.

API 사용

Props (### Props)

Prop	Default	Type
`dark`		`string`
`light`		`string`
`alt`		`string`
`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`
`crossorigin`		`"anonymous" \| "use-credentials"`

이 구성 요소는 모든 기본 <img> HTML 속성도 지원합니다.

변경 로그

No recent changes

ColorModeButton

A Button to switch between light and dark mode.

ColorModeSelect

A Select to switch between system, dark and light mode.