Image 图片

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

自动根据图片占据位置大小选取最佳图片

import { DuImage } from 'dangoui'

如果你使用 Nuxt SSR，建议使用 NuxtImage

示例

<template>
  <PreviewBlock title="基本">
    <DuImage src="https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg" width="100px" height="100px" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuImage } from 'dangoui'
</script>

配合全局配置

在生产级别的应用中，大部分情况下都不是直接展示原始图片，而是根据实际图片展示的大小选择最合适的图片规格进行展示，全局配置提供了这种能力（待补充描述）：

import { globalConfig } from 'dangoui'

app.use(globalConfig, {
  image: {
    providers: [
      {
        test: /^https:\/\/cdn\.qiandaoapp\.com/,
        getImage(src, options) {
          return {
            url: src,
          }
        },
      },
    ],
  },
})

全局配置

<template>
  <PreviewBlock title="基本">
    <DuImage
      src="https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg"
      width="100px"
      height="100px"
    />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuImage } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
ext-style	`string \| { [x: string]: string \| number; }`	`{}`	自定义 style
mode	`"aspectFill" \| "aspectFit" \| "widthFix"`	`"aspectFill"`	缩放模式
width	`string \| number`	`"100%"`	宽度，如果能知道占据的宽度，最好设置，可以优化性能
height	`string \| number`	`"100%"`	高度，如果能知道占据的高度，最好设置，可以优化性能
radius	`string \| number`	-	圆角
show-menu-by-long-press	`boolean`	`false`	showMenuByLongPress 微信小程序
ext-class	`string \| string[] \| Record<string, boolean>`	-	自定义 class
src	`string`	-	src