# 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
上次更新时间: 11/8/2022, 11:23:27 PM