Image 图片

展示图片，支持失败占位与点击预览。

基础用法

点击缩略图可打开预览。

加载失败

<script setup>
import { DanImage, DanSpace } from '@dandan-ui/ui'
</script>

<template>
  <DanSpace wrap>
    <DanImage
      src="/images/wall-sunset.png"
      alt="城墙日落"
      style="width: 180px; height: 112px; border-radius: 8px"
      preview
    />
    <DanImage
      src="/images/city-rainbow.png"
      alt="城市彩虹"
      style="width: 180px; height: 112px; border-radius: 8px"
      preview
    />
    <DanImage
      src="/images/blackhole.png"
      alt="黑洞"
      style="width: 180px; height: 112px; border-radius: 8px"
      preview
    />
    <DanImage src="" style="width: 180px; height: 112px; border-radius: 8px" />
  </DanSpace>
</template>

Props

属性	说明	类型	默认值
src	图片地址	string	''
alt	替代文本	string	''
fit	填充模式	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	'cover'
lazy	懒加载	boolean	false
preview	是否可预览	boolean	false
previewSrc	预览大图，默认用 src	string	''