图片 xImage

---

在线预览

在线模拟尺寸:

介绍

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

平台兼容

H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑️	☑️	☑️	☑️	4.44+	1.1.9

文件路径

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

使用

<x-image></x-image>

Props 属性

名称	说明	类型	默认值
width	宽度，默认100%<br>18rpx,18px,15%支持这三种单位，如果只写"18"就表示18rpx	string	"100%"
height	高度,auto,%,rpx,px,string number<br>18rpx,18px,15%支持这三种单位，如果只写"18"就表示18rpx	string	"auto"
src	图片源	string	""
previewSrc	预览的图片源,如果为空则与src同步	string	""
model	模式	IMG_MODEL	"fill"
preview	点击后是否预览图片	boolean	true
ratio	预览占位比例<br>宽/高，当数据没加载前，如果你设置了一项值比如宽，高会自动根据这个比例计算<br>当图片加载成功后，使用正确的原图片比例设置。<br>默认是5/4=1.25	number	1.25
round	圆角	string	'0'
iconSize	加载和失败时的图标大小。	string	"16"
placeBgColor	占位背景色	string	"#F5F5F5"
placeDarkBgColor	点位暗黑时的背景，如果不填写默认填充inputDarkBgcolor	string	""
fadeShow	是否在安卓上显示过渡动画	boolean	false
lazy	用于在scorllview根节点的页面进行懒加载,不可视范围内的不显示.请仅慎使用,不可在list-view中使用.	boolean	false

Events 事件

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

Slots 插槽

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

Ref 方法

名称	参数	返回值	说明

示例文件路径

/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://store.tmui.design/api_v2/public/random_picture?random=183"></x-image>
				<x-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=0239"></x-image>
				<x-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=22233"></x-image>
				<x-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=9654"></x-image>
				<x-image width="18%" src="https://store.tmui.design/api_v2/public/random_picture?random=212"></x-image>
			</x-sheet>
				
			<x-sheet >
				<x-image round="12" src="https://store.tmui.design/api_v2/public/random_picture?random=993"></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://store.tmui.design/api_v2/public/random_psicture?random=5342"></x-image>
				<x-image width="150" height="150" src="https://store.tmui.design/api_v2/public/random_picture?random=6s73"></x-image>
			</x-sheet>
				
			<x-sheet>
				<view class="flex flex-row flex-row-center-between flex-wrap">
					<x-image width="48%" src="https://store.tmui.design/api_v2/public/random_picture?random=vsf"></x-image>
					<x-image width="48%" src="https://store.tmui.design/api_v2/public/random_picture?random=df3"></x-image>
				</view>
			</x-sheet>
		</view>
		
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
<script>
	import { XACTION_MENU_ITEM_INFO } from "@/uni_modules/tmx-ui/interface.uts"
	export default {
		data() {
			return {
				list:[] as XACTION_MENU_ITEM_INFO[],
			};
		},
		onLoad() {
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">

</style>