# Image
图片懒加载
设置 lazy属性来开启图片懒加载，需要搭配 vue-lazyload 组件使用。
# 基础渲染
基础用法与原生 img 标签一致，可以设置 src、width、height、alt 等原生属性。
<template>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
:height="200"
>
</d-image>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# 填充模式
通过 fit 属性可以设置图片填充模式，等同于原生的 object-fit 属性，可选值见下方表格。
<template>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
fit="contain"
:height="200"
>
</d-image>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# 图片位置
通过 position 属性可以设置图片位置，结合 fit 属性使用，等同于原生的 object-position 属性。
<template>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
fit="contain"
position="left left"
:height="200"
>
</d-image>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# 圆形图片
通过 round 属性可以设置图片变圆，注意当图片宽高不相等且 fit 为 contain 或 scale-down 时，将无法填充一个完整的圆形。
<template>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
round
:width="200"
:height="200"
>
</d-image>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# 加载中提示
提供了默认的加载中提示，支持通过 loading 插槽自定义内容。
默认
自定义提示
<template>
<div>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
:height="200"
>
<template v-slot:loading></template>
</d-image>
<p style="text-align: center; margin: 0">默认</p>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f.png"
:height="200"
>
<template v-slot:loading>
<d-loading type="spinner"></d-loading>
</template>
</d-image>
<p style="text-align: center; margin: 0">自定义提示</p>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# 加载失败提示
提供了默认的加载失败提示，支持通过 error 插槽自定义内容。
默认
自定义提示
<template>
<div>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f2.png"
:height="200"
>
<template v-slot:error></template>
</d-image>
<p style="text-align: center; margin: 0">默认</p>
<d-image
src="https://dcb-resource.gogpay.cn/duoduo-warehouse/png/8656bf02dc494689848e35e55ef2032f2.png"
:height="200"
>
<template v-slot:error>加载失败</template>
</d-image>
<p style="text-align: center; margin: 0">自定义提示</p>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
# # API
# # 属性
| 名称 | 说明 | 类型 | 默认值 |
| src | 图片链接 | string | 必填 |
| transformWebP | 转换webp格式 | boolean | true |
| position | 图片位置，等同于原生的 object-position 属性，可选值为 top right bottom left 或 string | string | center |
| lazy | 是否开启图片懒加载，须配合 vue-lazyload 组件使用 | boolean | false |
| fit | 图片填充模式 | string | fill |
| alt | 替代文本 | string | |
| width | 宽度，默认单位为px | number | string | |
| height | 高度，默认单位为px | number | string | |
| radius | 圆角大小，默认单位为px | number | string | |
| round | 是否显示为圆形,注意当图片宽高不相等且 fit 为 contain 或 scale-down 时，将无法填充一个完整的圆形。 | boolean | false |
| iconSize | 加载图标和失败图片的大小 | string | 16px |
# # 插槽
| 名称 | 说明 | 参数 |
| loading | 自定义加载中的提示内容 | 无 |
| error | 自定义加载失败时的提示内容 | 无 |
# # 事件
| 名称 | 说明 | 参数 | ||||||
| error | 点击图片时触发 | 无 | ||||||
| click | 图片加载失败时触发 |
| ||||||
| load | 图片加载完毕时触发 | 无 |