快应用 image组件

概述

渲染图片

子组件

不支持

属性

支持 通用属性

名称	类型	默认值	必填	描述
src	<uri>	-	否	图片的 uri，同时支持本地和云端路径，支持的图片格式包括静态类型（png, jpg）和动态类型（gif）。支持 svg 类型图片格式（svg）1020+
alt	<uri> | 'blank' 1060+	-	否	加载时显示的占位图；只支持本地图片资源。

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

1. 如果 Image 组件没有设置 alt 值，终端会加上默认的灰色占位图。
2. src 为本地图片地址时，不会有占位图
3. src 为远程图片地址时，如果之前已经成功加载过图片，有本地缓存，则不会有占位图
4. src 为远程图片地址时，且 Image 组件 的 alt 值传入字符串 "blank" 值，不会有占位图。（可避免一些远程地址的小图标第一次加载时瞬间闪烁的现象）
5. 设置 alt 为本地图片地址时，占位图缩放模式由原来的居中不缩放改为居中保持宽高比缩放，减少了占位图资源文件的分辨率与体积大小

SVG 图片格式说明

• 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 deprecated	cover | contain | stretch | center	cover	否	图片的缩放类型
object-fit 1040+	contain | cover | fill | none | scale-down	cover	否	图片的缩放类型

resize-mode 类型 deprecated

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

object-fit 类型

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

事件

支持 通用事件

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

image   示例代码

查看 示例代码