image

_{手机 手表}

概述

渲染图片

子组件

不支持

属性

支持通用属性

名称	类型	默认值	必填	描述
src	<uri>	-	否	图片的 uri，同时支持本地和云端路径，支持的图片格式包括静态类型（png, jpg）和动态类型（gif）。另外，也支持 svg 类型（svg） 与 HEIF 类型（heic/heif) 图片格式。 HEIF 格式图片浏览需设备硬件支持，以及Android 10+版本的系统
alt	<uri> | 'blank'	-	否	加载时显示的占位图；只支持本地图片资源。

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	contain | cover | fill | none | scale-down	cover	否	图片的缩放类型

注意：

1. resize-mode deprecated 参数列表如下：

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

事件

支持通用事件

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

image   示例代码

查看示例代码 (opens new window)

子组件

不支持

属性

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

样式

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

事件

不支持

方法

不支持