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

<div class="container out-container">
    <div class="container">
        <text class="title">基础用法</text>
        <div>
            <image class="images" src="common/images/bg-tv.jpg"></image><!--src输入图片地址></!-->
            <image class="images round" src="common/images/bg-tv.jpg"></image>
        </div>
    </div>

    <text class="title">填充模式</text>
    <div class="divImg">
        <div class="container">
            <image class="images fill" src="common/images/bg-tv.jpg"></image>
            <text class="object-fit object-fill">fill</text>
        </div>

        <div class="container">
            <image class="images cover" src="common/images/bg-tv.jpg"></image>
            <text class="object-fit object-cover">cover</text>
        </div>

        <div class="container">
            <image class="images contain" src="common/images/bg-tv.jpg"></image>
            <text class="object-fit object-contain">contain</text>
        </div>

        <div class="container">
            <image class="images none" src="common/images/bg-tv.jpg"></image>
            <text class="object-fit object-none">none</text>
        </div>

        <div class="container">
            <image class="images scale-down" src="common/images/bg-tv.jpg"></image>
            <text class="object-fit object-scale">scale-down</text>
        </div>
        <div class="container">
            <image class="images scale-down" src="" alt="common/images/yaoqing.png""></image><!--alt当src图片不显示时显示alt的占位图></!-->
        </div>
    </div>

    <text class="title">加载失败</text>
    <div class="loading">
        <image class="fail-image" src="common/images/bg-tv2.jpg" oncomplete="imageComplete(1)" onerror="imageError(1)"></image>
        <text class="fail" show="{{ txt }}">加载失败</text><!--{{ txt }}被定义为false></!-->
    </div>
    <text class="object-fit object-fail">自定义提示</text>
</div>

 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'
    }
}

图片