Skip to content
iuiDesign
100%
02:32
本页目录

展示和预览图片。

基本用法

需要查看图片的时候,简单的设置 src 属性,就能获得一个有预览图片功能的组件。

html
<iui-image src="https://example.jpg"></iui-image>
<iui-image src="https://example.jpg"></iui-image>

圆角

通过设置 radius 属性,可以快速设置图片的圆角。

html
<iui-image :radius="6" src="https://example.jpg"></iui-image>

<!-- 圆形图片 -->
<iui-image radius="50%" src="https://example.jpg"></iui-image>
<iui-image :radius="6" src="https://example.jpg"></iui-image>

<!-- 圆形图片 -->
<iui-image radius="50%" src="https://example.jpg"></iui-image>

裁剪模式

通过 mode 参数配置填充模式,此模式用法与 uni-app 的 image 组件的 mode 参数完全一致,详见 Image

html
<iui-image src="https://example.jpg" mode="widthFix"></iui-image>
<iui-image src="https://example.jpg" mode="widthFix"></iui-image>

API

<Image>props
参数描述类型默认值
src图片资源地址String-
mode裁剪模式,见上方说明StringscaleToFill
loading加载中状态 (受控模式)Booleanfalse
errorText加载失败提示文案String加载失败
lazyLoad 图片懒加载,只针对小程序中page与scroll-view下的image有效 Booleanfalse
radius圆角String | Number0
<Image>events
事件名描述参数
load图片加载成功时触发-
error图片加载失败时触发-