教程 框架 组件 接口 其他

image

概述

渲染图片

子组件

不支持

属性

支持通用属性

名称类型默认值必填描述
src<uri>-图片的 uri,同时支持本地和云端路径,支持的图片格式包括静态类型(png, jpg)和动态类型(gif)。支持 svg 类型图片格式(svg)1020+
alt<uri> | 'blank' 1060+-加载时显示的占位图;只支持本地图片资源。
auotplay 1080+<boolean>true控制 gif/webp 图片是否自动播放动画。值设置为 true,图片可见时自动播放,不可见时自动停止播放;值设置为 false,图片不自动播放,需要开发者调用播放接口启动动画。

注意:1060 版 alt 属性加入了新特性,详情如下:

a.如果 Image 组件没有设置 alt 值,终端会加上默认的灰色占位图。

b.src 为本地图片地址时,不会有占位图

c.src 为远程图片地址时,如果之前已经成功加载过图片,有本地缓存,则不会有占位图

d.src 为远程图片地址时,且 Image 组件 的 alt 值传入字符串 "blank" 值,不会有占位图。(可避免一些远程地址的小图标第一次加载时瞬间闪烁的现象)

e.设置 alt 为本地图片地址时,占位图缩放模式由原来的居中不缩放改为居中保持宽高比缩放,减少了占位图资源文件的分辨率与体积大小

SVG 图片格式说明1020+

  • 1.完全支持的标签及其属性

<circle> <clipPath> <defs> <desc> <ellipse> <g> <line> <linearGradient> <marker> <mask> <path> <polygon> <polyline> <rect> <solidColor> <stop> <svg> <switch> <symbol> <title> <use> <view>

  • 2.受限制支持的标签

<image>: 不支持加载外部的 SVG 文件。

<text>: 不支持 x,y,dx 和 dy 的多值形式。不支持某些其他文本功能,例如:alignment-baseline 等。

<textPath>: 与<text>相同的限制。

<tref>: 与<text>相同的限制。此外,不支持外部 href 引用。

<tspan>: 与<text>相同的限制。

<pattern>: 目前不支持 Patterned strokes。

<radialGradient>: 目前不支持 fx 和 fy 属性。

<style>: 使用了简化的 CSS 解析器,不支持整个 CSS 标准。

  • 3.暂时完全不支持

不支持动画和滤镜。

样式

支持通用样式

名称类型默认值必填描述
resize-mode deprecatedcover | contain | stretch | centercover图片的缩放类型
object-fit 1040+contain | cover | fill | none | scale-downcover图片的缩放类型

resize-mode 类型 deprecated

类型描述
cover保持宽高比缩小或放大,使得两边都大于或等于显示边界,居中显示
contain保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,居中显示
stretch不保存宽高比,填充满显示边界
center居中,无缩放

object-fit 类型 1040+

类型描述
contain保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,居中显示
cover保持宽高比,缩小或者放大,使得两边都大于或等于显示边界,居中显示
fill不保存宽高比,填充满显示边界
none居中,无缩放
scale-down保持宽高比,缩小或保持不变,取 containnone中显示较小的一个,居中显示

事件

支持通用事件

名称参数描述
complete 1030+{width: widthValue(px), height: heightValue(px)}图片加载完成时触发
error 1030+-图片加载失败时触发

方法

名称参数描述
startAnimation 1080+-启动 gif/webp 图片的动画播放
stopAnimation 1080+-停止 gif/webp 图片的动画播放

image   示例代码

查看示例代码

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容