image
概述
渲染图片
子组件
不支持
属性
支持通用属性
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
src | <uri> | - | 否 | 图片的 uri,同时支持本地和云端路径,支持的图片格式包括静态类型(png, jpg)和动态类型(gif)。支持 svg 类型图片格式(svg)1020+ |
alt | <uri> | - | 否 | 加载时显示的占位图;只支持本地图片资源 |
SVG 图片格式说明1020+
完全支持的标签及其属性
<circle>
<clipPath>
<defs>
<desc>
<ellipse>
<g>
<line>
<linearGradient>
<marker>
<mask>
<path>
<polygon>
<polyline>
<rect>
<solidColor>
<stop>
<svg>
<switch>
<symbol>
<title>
<use>
<view>
受限制支持的标签
<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 标准。
- 暂时完全不支持不支持动画和滤镜。
样式
支持通用样式
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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 类型 1040+
类型 | 描述 |
---|---|
contain | 保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,居中显示 |
cover | 保持宽高比,缩小或者放大,使得两边都大于或等于显示边界,居中显示 |
fill | 不保存宽高比,填充满显示边界 |
none | 居中,无缩放 |
scale-down | 保持宽高比,缩小或保持不变,取 contain 和 none 中显示较小的一个,居中显示 |
事件
支持通用事件
名称 | 参数 | 描述 |
---|---|---|
complete 1030+ | {width: widthValue(px), height: heightValue(px)} | 图片加载完成时触发 |
error 1030+ | - | 图片加载失败时触发 |
image 示例代码
查看示例代码