展示和预览图片。
基本用法
需要查看图片的时候,简单的设置 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<Image>
events