> 文档中心 > 5.8 image组件

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. 字符,可选值:

  • left 图片显示在组件左侧;
  • top 图片显示在组件顶部位置;
  • right 图片显示在组件右侧位置;
  • bottom图片显示在组件底部位置。

表1 object-fit 类型说明

类型

描述

cover

保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界,居中显示。

contain

保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内,居中显示。

fill

不保持宽高比进行放大缩小,使得图片填充满显示边界。

none

保持原有尺寸进行居中显示。

scale-down

保持宽高比居中显示,图片缩小或者保持不变。

说明

使用svg图片资源时:

  • 建议设置image组件的长宽,否则在父组件的长或宽为无穷大的场景下,svg资源将不会绘制;
  • 如果svg描述中未指定相应的长宽,则svg将会填满image组件区域;
  • 如果svg描述中指定了相应的长宽,和image组件本身的长宽效果如下:
  1. 如果image组件本身的长宽小于svg中的长宽,svg会被裁切,仅显示左上角部分;
  2. 如果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'    }}

图片