Image (图片)
image组件的加强版，在原有功能增加、加载中、加载失败提示、圆角值和形状等。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-section main-class="mb-30" title="基础功能"></t-section>
<t-image src="/pagesA/static/image/D1.jpg" main-class="h-350 w-100% tdr mb-30" :fade-show="true"></t-image>
<t-section main-class="mb-30" title="开启预览"></t-section>
<t-image src="/pagesA/static/image/D2.jpg" main-class="h-350 w-100% tdr mb-30" :preview="true"
:loading="false"></t-image>
<t-section main-class="mb-30" title="loading属性配置"></t-section>
<t-image src="/pagesA/static/image/D1.jpg" main-class="h-350 w-100% tdr mb-30"
:loadingAttrs="{name:'setting',type:'p',size:'l','mainClass':'s-200'}" :fade-show="true"></t-image>
<t-section main-class="mb-30" title="加载错误占位图"></t-section>
<t-image main-class="twh-350 tdr" src="https://ll-yundie-xyz/pagesA/static/loginbg1.jpeg"></t-image>
<t-section main-class="mb-30" title="自定义加载错误占位图"></t-section>
<t-image main-class="twh-350 tdr" src="https://ll-yundie-xyz/pagesA/static/loginbg1.jpeg"
placeholder-image="/pagesA/static/image/D2.jpg"></t-image>
</t-page>
</template>
<script setup>
</script>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| mode | String | scaleToFill | 图片裁剪、缩放的模式 | scaleToFill: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取widthFix: 宽度不变，高度自动变化，保持原图宽高比不变heightFix: 高度不变，宽度自动变化，保持原图宽高比不变top: 不缩放图片，只显示图片的顶部区域bottom: 不缩放图片，只显示图片的底部区域center: 不缩放图片，只显示图片的中间区域left: 不缩放图片，只显示图片的左边区域right: 不缩放图片，只显示图片的右边区域top left: 不缩放图片，只显示图片的左上边区域top right: 不缩放图片，只显示图片的右上边区域bottom left: 不缩放图片，只显示图片的左下边区域bottom right: 不缩放图片，只显示图片的右下边区域 |
| loading | Boolean | false | 是否显示加载动画 | |
| placeholderImage | String | `` | 默认占位图 | |
| loadingAttrs | UTSJSONObject | {} | 加载组件的属性配置 支持t-loading的所有属性 | |
| src | String | `` | 图片资源地址 | |
| placeholder | Boolean | false | 是否默认占位图 | |
| fadeShow | Boolean | true | 图片加载是否显示淡入动画效果 | |
| preview | Boolean | false | 是否预览 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| click | (e : UniPointerEvent) | - |
| error | (e:UniImageErrorEvent) | 加载错误时触发 |
| load | (e:UniImageLoadEvent) | 图片加载完成时触发 |