# t-image

Image 图片

t-image 组件介绍

t-image 是 image 组件的加强版，在原有功能增加加载中、加载失败提示、圆角值和形状等。提供更完善的图片展示体验。

t-image 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-image 基础用法

基础用法参考 demo/image/image.uvue，通过 src 属性设置图片地址。

<template>
	<view class="p-15">
		<t-section class="mb-15" title="基础功能"></t-section>
		<t-image src="/static/image/D1.jpg" :class="[`h-175 w-100% mb-15 trm`]" :fade-show="true"></t-image>
		<t-section class="mb-15" title="开启预览"></t-section>
		<t-image src="/static/image/D2.jpg" :class="[`h-175 w-100% mb-15 trm`]" :preview="true"></t-image>
		<t-section class="mb-15" title="错误占位图"></t-section>
		<t-image class="twh-175 trm" src="https://ll-yundie-xyz/pagesA/static/loginbg1.jpeg" loading="loading">
			<template #error>
				<image class="w-100%" mode="widthFix" src="/static/tabbar/dark/my.png"></image>
			</template>
		</t-image>
		<t-section class="mb-15" title="自定义加载" loading="loading"></t-section>
		<t-image class="twh-175 trm" src="https://ll-yundie-xyz/pagesA/static/loginbg1.jpeg">
			<template #loading>
				<text :class="[`ttc-i`]">加载中</text>
			</template>
			<template #error>
				<text>加载失败了</text>
			</template>
		</t-image>
		<view class="fais">
			<t-image src="/static/image/D1.jpg" class="w-150 r-10 mb-15" mode="widthFix" :fade-show="true"></t-image>
			<t-image src="/static/image/D1.jpg" class="h-150 mb-75" image-class="r-20" mode="heightFix"
				:fade-show="true"></t-image>
		</view>
	</view>
</template>
<script setup>
</script>

t-image Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
src	图片资源地址	string	''
mode	图片裁剪、缩放的模式	string	'scaleToFill'
placeholder	加载失败时的占位文字	boolean	false
preview	是否支持预览	boolean	false
fadeShow	图片加载是否显示淡入动画效果	boolean	true
loading	加载时的文字	string	''
imageClass	image 样式，对应外部类 image-class	string	''
loadingClass	loading 文字样式，对应外部类 loading-class	string	''
placeholderClass	placeholder 文字样式，对应外部类 placeholder-class	string	''

mode 可选值

值	说明
scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix	宽度不变，高度自动变化，保持原图宽高比不变
heightFix	高度不变，宽度自动变化，保持原图宽高比不变
top	不缩放图片，只显示图片的顶部区域
bottom	不缩放图片，只显示图片的底部区域
center	不缩放图片，只显示图片的中间区域
left	不缩放图片，只显示图片的左边区域
right	不缩放图片，只显示图片的右边区域
top left	不缩放图片，只显示图片的左上边区域
top right	不缩放图片，只显示图片的右上边区域
bottom left	不缩放图片，只显示图片的左下边区域
bottom right	不缩放图片，只显示图片的右下边区域

t-image Events

事件名	说明	回调参数
click	点击时触发	-
load	图片加载完成时触发	-
error	图片加载失败时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

外部类

类名	说明
image-class	图片样式
loading-class	加载文字样式
placeholder-class	占位文字样式

t-image Slots

插槽名	说明
loading	加载中状态插槽
error	加载失败状态插槽