5.8 image组件
image
支持设备
手机 |
平板 |
智慧屏 |
智能穿戴 |
---|---|---|---|
支持 |
支持 |
支持 |
支持 |
子组件
不支持。
属性
除支持通用属性外,还支持如下属性:
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
src |
string |
- |
否 |
图片的路径,支持本地和云端路径,图片格式包括png、jpg、bmp、svg和gif。 支持Base64字符串6+。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。 支持dataability://的路径前缀,用于访问通过data ability提供的图片路径,具体路径信息详见Data Ability说明6+。 |
alt |
string |
- |
否 |
占位图,当指定图片在加载中时显示。 |
样式
除支持通用样式外,还支持如下属性:
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
object-fit |
string |
cover |
否 |
设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。(不支持svg格式) |
match-text-direction |
boolean |
false |
否 |
图片是否跟随文字方向。(不支持svg格式) |
fit-original-size |
boolean |
false |
否 |
image组件在未设置宽高的情况下是否适应图源尺寸(该属性为true时object-fit属性不生效),svg类型图源不支持该属性。 |
object-position7+ |
string |
0px 0px |
否 |
设置图片在组件内展示的位置。 设置类型有两种: 1. 像素,单位px,示例 15px 15px 代表X轴或者Y轴移动的位置 2. 字符,可选值:
|
表1 object-fit 类型说明
类型 |
描述 |
---|---|
cover |
保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界,居中显示。 |
contain |
保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内,居中显示。 |
fill |
不保持宽高比进行放大缩小,使得图片填充满显示边界。 |
none |
保持原有尺寸进行居中显示。 |
scale-down |
保持宽高比居中显示,图片缩小或者保持不变。 |
说明
使用svg图片资源时:
- 建议设置image组件的长宽,否则在父组件的长或宽为无穷大的场景下,svg资源将不会绘制;
- 如果svg描述中未指定相应的长宽,则svg将会填满image组件区域;
- 如果svg描述中指定了相应的长宽,和image组件本身的长宽效果如下:
- 如果image组件本身的长宽小于svg中的长宽,svg会被裁切,仅显示左上角部分;
- 如果image组件本身的长宽大于svg中的长宽,svg会被放置在image组件的左上角,image组件其他部分显示空白。
事件
除支持通用事件外,还支持如下事件:
名称 |
参数 |
描述 |
---|---|---|
complete(Rich) |
{ width:width, height:height } |
图片成功加载时触发该回调,返回成功加载的图源尺寸。 |
error(Rich) |
{ width:width, height:height } |
图片加载出现异常时触发该回调,异常时长宽为零。 |
示例
html
基础用法 填充模式 fill cover contain none scale-down 加载失败 加载失败 自定义提示
css
.container { flex-direction: column;}.out-container { margin-top: 20px;}.divImg { flex-direction: row; flex-wrap: wrap;}.title { font-size: 13px; margin-top: 30px; margin-left: 15px; color: grey;}.images { margin: 15px 0 15px 15px; width: 100px; height: 100px; border: 1px solid rgba(0,0,0,0.9);}.round { border-radius: 100px;}.object-fit { font-family: HarmonyHeiTi; font-size: 16px; color: grey;}.object-fill { margin-left: 54px;}.object-cover { margin-left: 45px;}.object-contain { margin-left: 40px;}.object-none { margin-left: 46px;}.object-scale { margin-left: 23px;}.fill { object-fit: fill;/*图片填充的样式,不保持宽高比进行放大缩小,使得图片填充满显示边界。//设置图片的缩放类型。*/}.cover { object-fit: cover;/*图片填充的样式,保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界,居中显示。*/}.contain { object-fit: contain;/*图片填充的样式,保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内,居中显示。*/}.none { object-fit: none;/*图片填充的样式,保持原有尺寸进行居中显示。*/}.scale-down { object-fit: scale-down;/*图片填充的样式,保持宽高比居中显示,图片缩小或者保持不变。*/}.loading { width: 100px; height: 100px; margin-left: 15px; margin-top: 15px; background-color: rgba(0,0,0,0.2);}.fail-image { width: 24px;}.fail { width: 100px; font-size: 13px; color: rgba(0,0,0,0.25);}.object-fail { font-size:14px; margin: 10px 0 0 30px;}
js
import prompt from '@system.prompt';export default { data: { txt:'false' }, imageComplete(i,e){//图片成功加载时触发该回调,返回成功加载的图源尺寸。 prompt.showToast({ message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height, duration: 3000, }) }, imageError(i,e){//图片加载出现异常时触发该回调,异常时长宽为零。 this.txt = 'true' }}
图片