image — 实现与 components.md 对照
对照基准：
- 规格：docs/refs/components.md#image
- 实现：
packages/flexui-ascf/src/components/image/image.tsflexui-engine/.../adapters/image-adapter.ts- Native：
HRImageView.ets / image_view.cc
- Demo：
demos/.../image-demo/
AI 约束（与规格一致）：仅网络 URL；格式 png / jpg。
结论摘要
| 维度 |
结论 |
| 已交付（✅ 纳入） |
src、mode（5 种缩放）、bindload、binderror |
mode 实现 |
scaleToFill / aspectFit / aspectFill → resizeMode；widthFix / heightFix 在 load 后按原图比例改布局尺寸 |
| 规格「⚠️ 按需」 |
show-menu-by-longpress、fade-in、preload → 当前未实现 |
| 规格「⏭️」 |
WebView 裁剪 mode、webp、lazy-load、forceHttps → 未实现（符合规格） |
| 规格外扩展 |
default-source → ArkUI defaultSource（引擎占位，非 components.md 交付项；adapter 仅映射 kebab-case） |
属性对照
通用
| 属性 |
类型 |
规格默认 |
components.md |
当前实现 |
说明 |
src |
string |
— |
✅（受 URL/格式约束） |
✅ |
AI：网络 png/jpg |
mode |
string |
scaleToFill |
✅（见合法值） |
✅ → resizeMode + widthFix/heightFix 布局 |
见下表 |
show-menu-by-longpress |
boolean |
false |
⚠️ 按需 |
❌ 未实现 |
平台长按菜单 |
binderror |
event |
— |
✅ |
✅ error |
detail 含 errMsg 等 |
bindload |
event |
— |
✅ |
✅ load |
detail 含 width / height |
mode 合法值
| 值 |
规格说明 |
components.md |
当前实现 |
scaleToFill |
拉伸填满 |
✅ |
✅ → stretch |
aspectFit |
完整显示，可留白 |
✅ |
✅ → contain |
aspectFill |
裁剪填满 |
✅ |
✅ → cover |
widthFix |
宽固定，高随比例 |
✅ |
✅ load 后写 height，resizeMode=stretch |
heightFix |
高固定，宽随比例 |
✅ |
✅ load 后写 width，resizeMode=stretch |
top / bottom / center / left / right / top left / … |
裁剪模式 |
⏭️ WebView |
❌ |
Skyline
| 属性 |
类型 |
默认 |
components.md |
当前实现 |
fade-in |
boolean |
false |
⚠️ 按需 |
❌ |
preload |
boolean |
false |
⚠️ 按需 |
❌（曾试做过，已回退） |
WebView
| 属性 |
components.md |
当前实现 |
webp |
⏭️ WebView / AI 冲突 |
❌ |
lazy-load |
⏭️ WebView |
❌ |
forceHttps |
⏭️ WebView |
❌ |
规格外（引擎扩展）
| 属性 |
当前实现 |
说明 |
default-source |
✅ → native defaultSource |
ArkUI 占位图；仅 kebab-case，不双写 defaultSource |
事件对照
| 事件 |
components.md |
当前实现 |
detail |
bindload |
✅ |
✅ |
width、height（原图尺寸） |
binderror |
✅ |
✅ |
errMsg；可有 errorCode |
bindtap 等 |
（基础能力） |
✅ |
tap/touch 映射 |
实现要点
- ASCF
image 仅声明 src、mode；DOM 后端用内层 <img> + object-fit；native 走 adapter。
widthFix / heightFix：EventDispatcher 在 native load 时调用 applyImageModeFixSize，按自然宽高改 inlineStyle 并 scheduleRender。- Demo：五 mode + binderror 换默认图；widthFix/heightFix 使用竖图便于对比。
参考路径
| 角色 |
路径 |
| 交付规格 |
components.md#image |
| 组件定义 |
packages/flexui-ascf/src/components/image/image.ts |
| Native 适配 |
flexui-engine/driver/js/packages/hippy-ascf/src/adapters/image-adapter.ts |
| OHOS 渲染 |
.../renderer_native/components/image/HRImageView.ets |
| Demo |
demos/ascf-ai-demo/.../image-demo/ |