图片组件

组件名称

ux-image

组件属性

属性名称	类型	默认值	作用
src	String	''	图片路径
width	Number	300	图片宽度，单位 rpx
height	Number	0	图片高度，单位 rpx，0 代表自动高度
timer	Number	200	图片加载动画延时时间，单位毫秒
borderRadius	String	0rpx	图片圆角
mode	String	widthFix	图片 mode 属性值

组件图示

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">图片自动高度</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row"
		style="padding:20rpx">
			<ux-image 
			:width="300" 
			mode="widthFix" 
			border-radius="8rpx" 
			src="https://plus.unsplash.com/premium_photo-1708983589793-56673027592e?w=600"></ux-image>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">属性演示</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row"
		style="padding:20rpx">
			<ux-image 
			bg-class="ux-bg-grey5" 
			:width="200" 
			:height="200" 
			border-radius="110rpx" 
			src="https://plus.unsplash.com/premium_photo-1708983589793-56673027592e?w=600"></ux-image>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">打开失败</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row"
		style="padding:20rpx">
			<ux-image 
			:width="200" 
			:height="160" 
			border-radius="8rpx" 
			src="no"></ux-image>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
		}
	},
	methods: {
		
	}
}
</script>
<style scoped>
</style>