用于显示图像

#属性

#auto-size

// @默认值: false
'auto-size'?: boolean;

当设置为 true 且 <image> 元素没有宽度或高度时， 在图像成功加载后， <image> 的大小将自动调整 以匹配图像的原始尺寸， 同时确保保持宽高比。

#autoplay

// @默认值: true
autoplay?: boolean;

指定动画图像加载后是否应自动开始播放。

#blur-radius

'blur-radius'?: string;

图像模糊半径

#cap-insets

'cap-insets'?: string;

9 切片图像的可拉伸区域，以百分比或小数表示，四个值分别对应上、右、下、左

#cap-insets-scale

// @默认值: 1
'cap-insets-scale'?: number;

调整 9 切片图像可拉伸区域的比例

#defer-src-invalidation

// @默认值: false
'defer-src-invalidation'?: boolean;

当设置为 true 时， <image> 仅在新图像成功加载后才会清除之前显示的图像资源。 默认行为是在开始新的加载之前清除图像资源。 这可以解决图像 src 切换并重新加载时的闪烁问题。不建议在列表等视图中存在节点重用的场景中启用此功能。

#image-config

// @默认值: "ARGB_8888"
'image-config'?: 'ARGB_8888' | 'RGB_565';

ARGB_8888 : 每个像素占用 32 位内存，支持半透明图像。

RGB_565 : 每个像素占用 16 位内存，可减少内存使用但会失去透明度。

自 3.5 版本起支持 PC 平台

#loop-count

// @默认值: 0
'loop-count'?: number;

动画图像的播放次数，0 表示无限循环

#mode

// @默认值: 'scaleToFill'
mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';

指定图像裁剪/缩放模式

scaleToFill : 不保留宽高比缩放图像，将图像拉伸以填充元素。

aspectFit : 保留宽高比缩放图像，使长边完全可见。

aspectFill : 保留宽高比缩放图像，确保短边填充元素。

center : 不缩放图像；图像居中显示。

#placeholder

placeholder?: string;

占位图像，使用方式与 src 相同

#prefetch-height

// @默认值: "0px"
'prefetch-height'?: string;

如果图像大小为 0，则不会加载，但如果设置了 prefetch-height 则会加载

#prefetch-width

// @默认值: "0px"
'prefetch-width'?: string;

如果图像大小为 0，则不会加载，但如果设置了 prefetch-width 则会加载

#src

// @默认值: undefined
src?: string;

支持 http/https/base64

#tint-color

'tint-color'?: string;

将所有非透明像素的颜色更改为指定的 tint-color。值为一个 <color> 。

#事件

前端可以绑定相应的事件回调来监听元素的运行时行为，如下所示。

#bindcurrentloopcomplete

bindcurrentloopcomplete = (e: BaseEvent) => {};

当动画图像的一个循环播放完成时触发。

#binderror

binderror = (e: ErrorEvent) => {};

图像加载错误事件

#bindfinalloopcomplete

bindfinalloopcomplete = (e: BaseEvent) => {};

当动画图像完成所有 loop-count 循环播放时触发。如果 loop-count 未设置，则不会触发此回调。

#bindload

bindload = (e: LoadEvent) => {};

图像加载成功事件

#bindstartplay

bindstartplay = (e: BaseEvent) => {};

当动画图像开始播放时触发。

#方法

前端可以通过 SelectorQuery API 调用组件方法。

#pauseAnimation

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'pauseAnimation',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

暂停动画，不重置循环次数。

#resumeAnimation

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'resumeAnimation',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

恢复动画，不重置循环次数。

#startAnimate

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'startAnimate',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

重新启动前端控制的动画播放方法，动画播放进度和循环次数将被重置。

#stopAnimation

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'stopAnimation',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

停止动画，并重置循环次数。