教程 框架 组件 接口 工具 其他

image

概述

渲染图片

子组件

不支持

属性

支持通用属性

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

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

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

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

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

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

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

注:1090 版本开始,缩放模式可以通过样式值alt-object-fit配置,默认值为cover(居中保持宽高比缩放),详情查看样式一节

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图片的缩放类型
filter 1090+blur0图片的滤镜模式,暂时只支持 blur 模式,用法与CSSv 对齐
alt-object-fit 1090+contain | cover | fill | none | scale-downcover占位图的缩放类型,仅在手动设置alt值时生效

注意:

  1. 在滤镜filter:blur的场景下,参数值只接受pxdp长度单位值,如filter:blur(4px)

参数不支持百分比,与CSS对齐

  1. object-fit 1040+,alt-object-fit 1090+ 参数列表如下:
类型描述
contain保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,居中显示
cover保持宽高比,缩小或者放大,使得两边都大于或等于显示边界,居中显示
fill不保存宽高比,填充满显示边界
none居中,无缩放
scale-down保持宽高比,缩小或保持不变,取 containnone中显示较小的一个,居中显示
  1. resize-mode deprecated 参数列表如下:
类型描述
cover保持宽高比缩小或放大,使得两边都大于或等于显示边界,居中显示
contain保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,居中显示
stretch不保存宽高比,填充满显示边界
center居中,无缩放

事件

支持通用事件

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

方法

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

image   示例代码

查看示例代码

作为text、span、a的子组件使用 1100+

概述

1100+版本,text、a、span组件支持image作为子组件使用

此时image组件支持的属性样式与现有的有所区别,具体如下

子组件

不支持

属性

名称类型默认值必填描述
id<string>-唯一标识
style<string>-样式声明
class<string>-引用样式表
for<array>-根据数据列表,循环展开当前标签
if<boolean>-根据数据 boolean 值,添加或移除当前标签
src<uri>-图片的 uri,同时支持本地和云端路径,当前支持图片格式:jpg、png、webp、svg
alt<string>-图片加载失败时用于占位显示的文本

样式

名称类型默认值必填描述
width<length>-图片的宽度,不设置时使用图片原始的宽度
height<length>-图片的高度,不设置时使用图片原始的高度
alignbottom | baselinebaseline图片与问题的对齐方式

事件

不支持

方法

不支持

条匹配 "" 的结果

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