最稳方案是flex+v-for实现九宫格排版：容器设display:flex+flex-wrap:wrap，子项用flex:0 0 calc(33.33%-6px)适配三列，图片统一width:100%+height:auto，缩略图≤300×300px且用webp格式，url须为https并配置download域，数据非3倍数时用空字符串补位并v-if控制显隐。
直接用 flex + v-for 实现九宫格多图排版最稳，别碰 grid 或原生 rich-text 渲染图片——小程序端塌陷、H5 端间隙错位、iOS 上白屏是常态。
为什么 display: grid 在评价页多图里根本不能用
微信小程序基础库低于 2.25.0 时完全不识别 display: grid；即使升级，grid-template-columns: repeat(3, 1fr) 在部分安卓机上仍会单列堆叠。H5 端虽支持，但 iOS Safari 对 gap 的解析和 Chrome 不一致，导致图片间距忽大忽小。评价页用户高频点击缩略图，样式错位直接影响信任感。
flex 布局怎么写才不崩（三图/四图/九图自动适配）
- 容器必须设
display: flex+flex-wrap: wrap，漏掉flex-wrap就会溢出不换行 - 子项用
flex: 0 0 calc(33.33% - 6px)（三列）或flex: 0 0 calc(25% - 6px)（四列），- 6px是为左右 margin 预留空间 - 图片统一用
width: 100%+height: auto，禁用mode="scaleToFill"，否则变形 - 如果要固定宽高比（如 1:1），老机型不用
aspect-ratio（兼容性差），改用padding-top: 100%+position: relative+image绝对定位填充
图片渲染卡顿、白屏、点击区域小的硬解法
直接 v-for 循环 <image></image> 标签，在低端安卓机上批量渲染极易卡顿甚至白屏。
- 必须用
<view></view>包一层再放<image></image>，避免原生组件批量挂载冲突 - 每张图加
@click="preview(index)"，预览时传入完整图片数组，不要只传当前 URL - 缩略图尺寸建议 ≤300×300px，格式优先
webp，降级jpeg；URL 必须是完整 HTTPS 地址，且域名已配置 download 合法域 - 热区太小？给
view容器设padding: 4rpx扩展点击范围，别只靠图片自身尺寸
数据长度不是 3 或 4 的倍数怎么办
后端返回 5 张图、7 张图是常态，不处理就会最后一行缺格子、布局断裂。
- 补空逻辑写在
computed里：gridList() { const padded = [...this.rawImages]; while (padded.length % 3) padded.push(''); return padded; } - 补的是空字符串
''，不是null或undefined，否则v-for渲染报错 - 不想显示空格子？用
v-if="item"控制显隐，但子项宽度得同步改成flex: 0 0 calc(100% / 3)，且父容器仍带flex-wrap
真正难的不是“怎么铺开”，而是“怎么让每张图都稳稳加载、点得准、缩略不失真、预览不闪退”——这些细节全藏在 padding 计算、图片 URL 规范、容器高度约束和 DOM 更新时机里，漏一个就可能线上翻车。
