示例仅供参考,请以真机为主

Image 图片

cl-image 组件基于 uni-app 的 image 组件

参数

参数说明类型可选值默认值
src资源地址string
mode裁剪、缩放的模式string
size尺寸string / number100%
round是否圆角booleanfalse
margin外间距array / string / number
preview-list预览列表array

插槽

插槽说明
error图片加载失败
placeholder图片地址为空

示例

裁剪模式

  • scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
  • aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来
  • aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来
  • widthFix 宽度不变,高度自动变化,保持原图宽高比不变
  • heightFix 高度不变,宽度自动变化,保持原图宽高比不变
<cl-image mode="aspectFill"></cl-image>

插槽

<!-- 空数据 -->
<cl-image src="">
	<template #placeholder>
		<text>图片地址为空</text>
	</template>
</cl-image>

<!-- 加载失败 -->
<cl-image src="http://">
	<template #error>
		<text>图片地址错误</text>
	</template>
</cl-image>

自定义大小

<cl-image :size="100"></cl-image>

<cl-image :size="[100, 200]"></cl-image>

点击预览

配置 previewList, 会自动匹配当前的 src 为第一张显示

<cl-image :preview-list="previewList"></cl-image>
Last Updated: