# Image 图片
此组件为uni-app的image组件的加强版;
在继承了原有功能外,还支持加载中、加载失败提示、圆角值和形状等。
详情可查阅uniapp image (opens new window)
# 基本使用
设置图片路径和宽高
<com-image src="/static/images/logo.png" width="250" height="200"></com-image>
设置圆角
<!-- 四周边框为10rpx -->
<com-image src="/static/images/logo.png" border-radius="10"></com-image>
<!-- 圆形 -->
<com-image src="/static/images/logo.png" border-radius="50%"></com-image>
出错时显示
<!-- 显示默认出错 -->
<com-image src="http://example/logo1.png"></com-image>
<!-- 常用于头像显示出错 -->
<com-image src="http://example/logo1.png" default-image="user"></com-image>
<!-- 自定义出错图片 -->
<com-image
src="http://example/logo1.png"
default-image="/static/images/logo.png">
</com-image>
开启点击图片预览(网络图片)
<com-image src="/static/images/flower.webp" enable-preview></com-image>
# API
# Props
| 属性名 | 说明 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| base | 基础地址 | String | 否 | - |
| src | 图片路径 | String | 是 | - |
| mode | 裁剪模式 | String | 否 | aspectFill |
| width | 宽度 | String | 否 | 100 |
| height | 高度 | String | 否 | 100 |
| borderRadius | 圆角值 | String | 否 | - |
| defaultImage | 默认占位图片 | String | 否 | - |
| border | 边框 | Boolean | 否 | false |
| borderWidth | 边框宽度 | String | 否 | 1 |
| bgColor | 背景颜色 | String | 否 | #f8f8f8 |
| showError | 是否显示出错占位图片 | Boolean | 否 | true |
| showLoading | 是否显示加载中的图片 | Boolean | 否 | true |
| enablePreview | 开启预览 | Boolean | 否 | false |
| showMenu | 是否开启长按识别菜单 | Boolean | 否 | false |