是什么
<image> 的 mode 决定了 图片如何在容器中缩放、裁剪、对齐。不同模式适用于不同场景（头像、商品图、背景图等）。
常用 mode 模式详解
| mode 值 | 行为说明 | 是否保持宽高比 | 是否可能裁剪 |
|---|---|---|---|
scaleToFill |
拉伸填满容器（完全覆盖） | ❌ 否 | ❌ 否（但会变形） |
aspectFit |
完整显示图片，按比例缩放，留白 | ✅ 是 | ❌ 否 |
aspectFill |
按比例缩放，填满容器，多余部分裁剪 | ✅ 是 | ✅ 是 |
widthFix |
宽度固定，高度自动调整（保持比例） | ✅ 是 | ❌ 否 |
heightFix |
高度固定，宽度自动调整（保持比例） | ✅ 是 | ❌ 否 |
top, bottom, center, left, right, top left… |
对齐方式（通常配合其他 mode 使用） | - | - |
aspectFill 的工作原理：
- 保持图片原始宽高比
- 缩放图片，使其“完全覆盖”容器
- 如果图片宽高比 ≠ 容器宽高比 → 多余部分被裁剪
- 某些平台（如 H5、App）在图片未加载前，容器可能没有实际高度，导致：容器高度 = 0。
aspectFill试图“填满一个高度为 0 的区域”。结果：图片渲染区域为 0，看起来“没显示”
widthFix 的工作原理：
- 它 以宽度为基准，自动计算高度
- 即使父容器高度为 0，它也会根据图片比例撑开高度，所以能看到图片
