Image 图片组件

此组件为uni-app-x的image组件的加强版，在继承了原有功能外、加载中、加载失败提示、圆角值和形状等。我们推荐您在任何使用图片场景的地方，都优先考虑使用这个小巧，精致而实用的组件。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

html

<template>
	<t-page title="图片" class="p.30">
		<t-card class="mb.30" title="Image 图片" sub-title="支持图片预览 错误处理"></t-card>
		<t-section class="mb.30" title="基础功能"></t-section>
		<t-image src="/static/image/D1.jpg" class="h.350-w.100%-tdr-mb.30"></t-image>
		<t-section class="mb.30" title="开启预览"></t-section>
		<t-image src="/static/image/D2.jpg" class="h.350-w.100%-tdr-mb.30" :preview="true"></t-image>
		<t-section class="mb.30" title="加载错误占位图"></t-section>
		<t-image class="twh.350" src="https://ll.yundie.xyz/static/loginbg1.jpeg"
			error-image="https://life.yundie.xyz/t-uvue-ui/default.png"></t-image>
	</t-page>
</template>

Props

名称	描述	类型	默认值	可选值
src	图片资源地址	String	''	-
mode	图片裁剪、缩放的模式	String	'scaleToFill'	'scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'
lazy-load	图片懒加载	Boolean	false	-
fade-show	图片显示动画效果	Boolean	false	-
draggable	鼠标长按是否能拖动图片(仅H5平台)	Boolean	false	-
loadingClass	加载中状态的样式类名	String	''	-
errorClass	加载错误状态的样式类名	String	''	-
errorImage	加载错误时显示的图片资源地址	String	''	-
preview	是否允许预览图片	Boolean	true	-

Events

事件名	描述	回调参数
@error	图片加载错误时触发	-
@load	图片加载完成时触发	-

Image 图片组件 ​

支持平台 ​

示例 ​

Props ​

Events ​

Image 图片组件

支持平台

示例

Props

Events