基础组件学习-image

样式

除支持通用样式外，还支持如下属性：

名称	类型	默认值	必填	描述
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	保持宽高比居中显示，图片缩小或者保持不变。

事件

除支持通用事件外，还支持如下事件：

名称	参数	描述
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>
            <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>

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