Image 图片

介绍

接近网页端img标签使用体验的图片组件

使用指南

默认

不携带参数,宽高为图片原始大小

<tms-image src="IMG_SRC"/>

指定宽高，并自定义加载中和请求错误slot

<tms-image src="IMG_SRC" width="100" height="100"
           show-loading customErrorSlot customLoadingSlot>
    <view slot="error">错误啦</view>
    <view slot="loading">加载中</view>
</tms-image>

圆形图片

<tms-image src="IMG_SRC" width="100" height="100" round/>

适配模式： contain

其它模式请查阅下方API列表。

<tms-image src="IMG_SRC" width="50" height="100"
           fitType="contain"/>

自定义样式，设置container-class

<tms-image src="IMG_SRC" height="200" container-class="border-radius"/>

.border-radius {
    border-radius: 15px;
}

自定义样式，设置style

<tms-image src="IMG_SRC" style="border-radius:25px 25px 0 0;width:50%;height:100px;"/>

API

属性	说明	类型	默认值	版本
width	图片宽度	string	''
height	图片高度	string	''
fit-type	图片填充模式	string	fill
style	自定义样式	string	''
src	图片链接	string	''
lazy-load	图片懒加载	boolean	false
show-loading	是否显示加载中提示	boolean	false
custom-error-slot	是否使用自定义错误slot	boolean	false
custom-loading-slot	是否使用自定义加载中slot, showLoading为true时有效	boolean	false
webp	是否支持webp格式图片	boolean	false
round	圆形图片样式	boolean	false

图片填充模式，fit-type属性可选值

属性	说明
fill	拉伸图片，使图片填满元素
cover	长宽比不变，使图片的短边能完全显示出来，长边两侧裁剪
contain	长宽比不变，使图片的长边能完全显示出来
heightFix	高度不变，宽度按长宽比自适应
widthFix	宽度不变，高度按长宽比自适应

EVENTS

属性	说明	类型
bind:loaded	图片加载成功时回调	(event) => {}
bind:error	图片加载失败时回调	(event) => {}

CSS变量

// 默认背景色
--image-placeholder-background-color: rgb(240, 240, 240);
// 加载中图标大小
--image-loading-icon-size: 76rpx;
// 加载失败图标大小
--image-error-icon-size: 76rpx;

FAQ