tmui-cli 2.0.2 → 2.0.4

package/data/uniappx/component/grid-builder.md

@@ -0,0 +1,39 @@
+::: sourceCode
+## grid-builder
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| padding | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
+| list | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>需要用于渲染的列表 |
+| child-count | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>完整列表的长度，如果不传则取 list 的长度作为其值 |
+| type | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| aligned | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
+| masonry | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
+| cross-axis-count | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
+| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
+| main-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
+| cross-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
+| @itembuild | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号 |
+| @itemdispose | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-builder)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/grid-builder.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-builder&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-builder&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-builder&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-builder&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-builder)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-builder&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/grid-view.md

@@ -0,0 +1,35 @@
+::: sourceCode
+## grid-view
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| type | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| aligned | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
+| masonry | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
+| cross-axis-count | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
+| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
+| main-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
+| cross-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
+| padding | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-view)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-view&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-view&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-view&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-view&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-view)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-view&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/horizontal-drag-gesture-handler.md

@@ -0,0 +1,40 @@
+::: sourceCode
+## horizontal-drag-gesture-handler
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| tag | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>声明手势协商时的组件标识 |
+| worklet:ongesture | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>手势识别成功的回调 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| state | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手势状态 |
+| absoluteX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 X 坐标 |
+| absoluteY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 Y 坐标 |
+| deltaX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，X 轴方向移动的坐标 |
+| deltaY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，Y 轴方向移动的坐标 |
+| velocityX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的横向速度（pixel per second) |
+| velocityY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的纵向速度（pixel per second) |
+| worklet:should-response-on-move | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手指移动过程中手势是否响应 |
+| worklet:should-accept-gesture | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手势是否应该被识别 |
+| simultaneous-handlers | Array.&lt;string&gt; | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array.&lt;string&gt;)*<br/>声明可同时触发的手势节点 |
+| native-view | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>代理的原生节点类型 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.horizontal-drag-gesture-handler)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/horizontal-drag-gesture-handler.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=horizontal-drag-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=horizontal-drag-gesture-handler&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=horizontal-drag-gesture-handler&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=horizontal-drag-gesture-handler&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=horizontal-drag-gesture-handler)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=horizontal-drag-gesture-handler&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/icon.md

@@ -0,0 +1,41 @@
+::: sourceCode
+## icon
+
+图标
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| type | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
+| 合法值 |
+| :- |
+| success |
+| success_no_circle |
+| warn |
+| waiting |
+| cancel |
+| download |
+| search |
+| clear |
+| size | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的大小，单位px |
+| color | string(string.ColorString) | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的颜色，同css的color |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/icon.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=icon&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=icon&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=icon&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=icon&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=icon)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=icon&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/image.md

@@ -0,0 +1,264 @@
+::: sourceCode
+## image
+
+> 组件类型：UniImageElement 
+
+ 图片
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| src | string(string.ImageURIString) |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片资源地址 |
+| mode | string | "scaleToFill" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片裁剪、缩放的模式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| scaleToFill | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
+| aspectFit | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
+| aspectFill | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |
+| widthFix | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 宽度不变，高度自动变化，保持原图宽高比不变 |
+| heightFix | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 高度不变，宽度自动变化，保持原图宽高比不变 |
+| top | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的顶部区域 |
+| bottom | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的底部区域 |
+| center | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的中间区域 |
+| left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左边区域 |
+| right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右边区域 |
+| top left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左上边区域 |
+| top right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右上边区域 |
+| bottom left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左下边区域 |
+| bottom right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右下边区域 |
+| lazy-load | boolean | false | Web x / 微信小程序 4.41 / Android x / iOS 4.11 / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |
+| fade-show | boolean | false | Web x / 微信小程序 x / Android 3.9 / iOS x / HarmonyOS x（部分支持，见上） | 图片显示动画效果 |
+| webp | boolean | true | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 是否支持 WebP 格式，web、app平台默认支持 WebP 格式，不支持本属性，无法关闭对 WebP 格式的解析。 |
+| show-menu-by-longpress | boolean | false | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 开启长按图片显示识别小程序码菜单 |
+| draggable | boolean | false | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 鼠标长按是否能拖动图片(仅H5平台) |
+| flatten | boolean | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 是否拍平组件 |
+| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载错误时触发，event.detail = { errMsg } |
+| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |
+
+### 事件
+#### UniImageErrorEvent
+
+```mermaid
+graph LR
+  
+UniImageErrorEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniImageErrorEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniImageErrorEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| errMsg | string | 是 | 错误信息 |
+
+#### UniImageLoadEvent
+
+```mermaid
+graph LR
+  
+UniImageLoadEvent -- Extends --> UniEvent
+  style UniEvent color:#42b983
+  click UniEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent"
+```
+##### UniImageLoadEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniImageLoadEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| width | number | 是 | 图片宽度 |
+| height | number | 是 | 图片高度 |
+
+
+
+### 图片格式
+- web平台支持的图片格式，不同浏览器有差异，可查询caniuse。
+- 小程序平台支持的图片格式与浏览器类似。但由于不同小程序平台的webview版本不一样，需要具体查阅小程序平台的图片组件介绍。\
+	注意：webp在不同小程序平台策略不同，有的需要打开 webp 属性，有的仅支持来自服务器的webp。
+- App平台支持的图片格式如下：
+
+| 图片格式| Android							| iOS												| HarmonyOS	| 备注																					|
+| ---			| ---									| ---												| ---				| ---																					|
+| BMP			| √										| √													| √					|																							|
+| GIF			| √										| √													| √					|																							|
+| ICO			| √										| √													| √					|																							|
+| JPG			| √										| √													| √					|																							|
+| PNG			| √										| √													| √					|																							|
+| WebP		| √										| √													| √					|iOS 14+ 为硬解码，低版本为软解码（软解性能较低）	|
+| HEIC		| √ (Android10+)			| √													| √					|																							|
+| AVIF		| √ (HBuilderX5.08+)	| √ (iOS16+)								| x					|系统支持硬解才有优势，使用三方软解还不如换用其他格式	|
+| TIF			| x										| √													| x					|																							|
+| SVG			| √ (HBuilderX4.81+)	| √ (iOS13+ HBuilderX4.81+)	| ️√				|	不支持svg动画。某些场景会解成位图渲染，[详见](#svg-support)		|
+
+
+如需其他图片格式，可自行开发uts组件插件或搜索插件市场，如
+- [apng插件](https://ext.dcloud.net.cn/search?q=apng&orderBy=Relevance&cat1=8&cat2=82)
+
+
+### src路径支持说明
+
+- 本地路径/static方式
+	由于uni-app/uni-app x编译时，只把/static目录下的静态资源copy到app中，所以src均需指向/static目录下。
+	其他目录的图片由于不会被打包进去，所以无法访问。
+	app平台文件路径会存在大小写敏感问题，为了有更好的兼容性，建议统一按大小写敏感原则处理 [详情](../api/file-system-spec.md#casesensitive)
+
+- 本地绝对路径file:///方式
+	app-android平台形如`file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png`。
+	访问本应用内的资源时无需使用本方式，推荐使用/static方式。上述地址受包名、appid影响。
+	file:///方式一般用于download等公共目录。使用前需确保拥有相关权限。
+
+- 支持网络路径
+	* 支持http、https。
+	* 安卓端image组件内部使用facebook的[fresco](https://github.com/facebook/fresco)库(2.5.0)，自带缓存策略，也会自动清理缓存。
+	* iOS端image组件内部使用[SDWebImage](https://github.com/SDWebImage/SDWebImage)库(5.10.0)，自带缓存策略，默认7天缓存，缓存过期后会自动清理。
+	* 鸿蒙平台 VDOM 模式 image 组件使用 arkUI 的 image 组件，缓存策略[另见](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image?ha_source=Dcloud&ha_sourceId=89000448)
+	* 鸿蒙平台蒸汽模式image组件使用[imageknifepro](https://gitcode.com/openharmony-sig/imageknifepro)库(1.0.12)，自带缓存策略，内存缓存256张128MB，磁盘缓存512张128MB，超限采用LRU淘汰。
+
+### 关于svg格式的矢量能力@svg-support
+
+svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会把svg转成位图渲染，此时将丢失矢量能力。
+
+- 鸿蒙平台蒸汽模式
+	* 如果启用了 `flatten` 拍平，则会转为位图。
+	* 设置部分 `mode` 属性进行图像裁剪，会转为位图进行裁剪。`mode` 设置为 `scaleToFill/aspectFit/aspectFill` 可以保持矢量能力，设置为其它值会转位图裁剪。
+	* 如果 `src` 设置了 `data:image/svg+xml;base64,...` 这种形式的 url，则会转为位图。
+
+### 子组件 @children-tags
+不可以嵌套组件
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/image/image.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/image/image.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/image/image
+
+>示例
+```vue
+<template>
+  <view class="image-page uni-theme-root">
+    <page-head :title="data.title"></page-head>
+    <scroll-view class="uni-theme-root" style="flex: 1">
+      <view class="uni-padding-wrap">
+        
+        <text class="uni-title-text">image样式大合集</text>
+        <text class="uni-subtitle-text uni-common-mb">右边为拍平</text>
+        <view class="styled-image-row">
+          <image class="styled-image" mode="aspectFill" :src="data.imageSrc"></image>
+          <image class="styled-image" mode="aspectFill" :src="data.imageSrc" flatten></image>
+        </view>
+
+        <text class="uni-title-text">自定义组件：右边拍平</text>
+        <view class="styled-image-row">
+          <child></child>
+          <child flatten></child>
+        </view>
+
+        
+        <text class="uni-title-text uni-common-mt">基础（右边为拍平）</text>
+        <view class="uni-center image-bg">
+            
+            <image class="image"  :fade-show="true" mode="widthFix" :src="data.imageSrc" @error="error" @load="load"></image>
+            <image class="image"  :fade-show="true" mode="widthFix" :src="data.imageSrc" @error="error" @load="load" flatten></image>
+            
+            
+            <image class="image"  mode="widthFix" :src="data.imageSrc" @error="error" @load="load"></image>
+            <image class="image"  mode="widthFix" :src="data.imageSrc" @error="error" @load="load" flatten></image>
+            
+        </view>
+
+        <button class="uni-btn" @tap="imageFormat">图片格式示例</button>
+        <button class="uni-btn" @tap="imageMode">图片缩放模式示例</button>
+        <button class="uni-btn" @tap="imagePath">图片路径示例</button>
+        <button class="uni-btn" @tap="imageLarge">大图示例</button>
+        <button class="uni-btn" @tap="imageLong">长图示例</button>
+        <button class="uni-btn" @tap="imageOrientation">图片方向修正示例</button>
+
+        
+        <navigator url="/pages/template/2000-image/2000-image">
+          <button class="uni-btn">组件性能测试</button>
+        </navigator>
+        <navigator url="/pages/template/2000-image/2000-image-svg">
+          <button class="uni-btn">组件性能测试(SVG)</button>
+        </navigator>
+        
+      </view>
+    </scroll-view>
+
+    <view v-if="data.autoTest">
+      <image :src="data.setCookieImage"></image>
+      <image :src="data.verifyCookieImage" @error="error"></image>
+    </view>
+  </view>
+</template>
+
+<style>
+  .image-page {
+    flex: 1;
+  }
+
+  .styled-image-row {
+    flex-direction: row;
+    background-color: var(--list-background-color, #ffffff);
+    justify-content: space-around;
+    height: 120px;
+    align-items: center;
+  }
+
+  /* image样式大合集 */
+  .styled-image {
+    width: 80px;
+    height: 80px;
+    margin: 5px;
+    padding: 5px;
+    border: 2px solid #ff6b6b;
+    border-radius: 10px;
+    background-color: #ffe0e0;
+    /* === 阴影 === */
+    box-shadow: 0 3px 6px rgba(255, 107, 107, 0.3);
+    /* === 可见性 === */
+    opacity: 0.98;
+    /* === 变换 === */
+    transform: rotate(45deg);
+  }
+
+  .image {
+    margin: 20px auto;
+    width: 100px;
+  }
+
+  .image-bg {
+    background-color: var(--list-background-color, #ffffff);
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.image)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=image&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=image&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=image&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=image&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=image)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=image&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)
+
+### tips
+- image组件默认宽度为320px、高度为240px
+- 在error事件里监听报错，并重新设置image组件的src，可实现自定义错误图。[详见示例代码](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/component/image/image-path.uvue)
+- 图片文件需在static目录（项目下或uni_modules下都支持static目录）下，或者import导入文件，否则文件不会被copy到最终的包中，导致无法访问
+- app-android平台由于默认启用了图片缩放（即根据组件实际宽高加载图片，以节省内存），所以可能导致load事件返回的图片尺寸并非图片原始尺寸
+- app-android平台不支持CMYK色彩的图片，[详见](https://github.com/facebook/fresco/issues/1404)
+- app-ios平台 VDOM模式的image组件不支持padding style（padding-top、padding-left、padding-right、padding-bottom）