图片 xImage

---

在线预览

在线模拟尺寸:

介绍

宽高可以设置，支持百分比，px,rpx

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-image/x-image.uvue

使用

<x-image></x-image>

Props 属性

名称	说明	类型	默认值
width	宽度，18rpx,18px,15%，只写"18"表示18rpx	string	"100%"
height	高度，auto,%,rpx,px	string	"auto"
src	图片源	string	""
previewSrc	预览的图片源，为空则与src同步	string	""
model	模式	IMG_MODEL	"fill"
preview	点击后是否预览图片,默认值是'null'字符串哦，这样就可以读取全局统一的配置，因为在x平台空值就会编译为true，因此使用字符串null代替空值。	union	"null"
ratio	预览占位比例 宽/高，默认5/4=1.25	number	1.25
round	圆角	string	'0'
iconSize	加载和失败时的图标大小	string	"16"
placeBgColor	占位背景色	string	"#F5F5F5"
placeDarkBgColor	占位暗黑时的背景，不填默认inputDarkColor	string	""
fadeShow	是否在安卓上显示过渡动画	boolean	false
lazy	用于在scrollview根节点的页面进行懒加载	boolean	false

Events 事件

名称	参数	说明
click	-	图片被点击

Slots 插槽

名称	说明	数据
loading	加载中的插槽,插槽内自行给你布局的view宽和高写100%	-
error	加载失败时的插槽,插槽内自行给你布局的view宽和高写100%	-

Ref 方法

名称	参数	返回值	说明
resize	-	-	-

示例文件路径

/pages/zhanshi/image

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">图片 image</x-text>
			<x-text color="#999999" >
				图片自带加载功能，宽和高可以不设置，自动以父级宽度为最大值，如果只设置了宽，高会自动设置，免去了大家设置图片宽高的麻烦
				支持百分比，px,rpx单位宽高设置
			</x-text>
		</x-sheet>

		<view >
			<x-sheet class="flex flex-row" style="justify-content: space-between;align-items: flex-start;">
				<x-image width="18%" src="https://picsum.photos/id/10/200/200"></x-image>
				<x-image width="18%" src="https://picsum.photos/id/20/200/200"></x-image>
				<x-image width="18%" src="https://picsum.photos/id/30/200/200"></x-image>
				<x-image width="18%" src="https://picsum.photos/id/40/200/200"></x-image>
				<x-image width="18%" src="https://picsum.photos/id/50/200/200"></x-image>
			</x-sheet>
				
			<x-sheet >
				<x-image round="12" src="https://picsum.photos/id/67/800/500"></x-image>
				<x-text font-size="18" class=" text-weight-b my-8">本地图片显示</x-text>
				<x-image width="150" height="150"  src="/static/tmui4xLibs/static/logo.png"></x-image>
			</x-sheet>
			<x-sheet class="flex flex-row flex-row-center-between">
				<x-image width="150" height="150" src="https://picsum.photos/id/82/300/300"></x-image>
				<x-image width="150" height="150" src="https://picsum.photos/id/96/300/300"></x-image>
			</x-sheet>
				
			<x-sheet>
				<view class="flex flex-row flex-row-center-between flex-wrap">
					<x-image width="48%" src="https://picsum.photos/id/110/600/400"></x-image>
					<x-image width="48%" src="https://picsum.photos/id/120/600/400"></x-image>
				</view>
			</x-sheet>
		</view>
		
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
<script setup lang="ts">

</script>

<style lang="scss">

</style>