uni-app image 元素在 flex column 布局下宽度为 0 的问题

现象

在flex column布局中，image元素指定了width: 100%，但实际渲染时宽度变为0了。

去掉width: 100%，图片就有实际宽度了。

原因

在flex-direction: column布局中，父容器宽度默认由内容撑开，如果父容器没有显示设置width: 100%（或固定宽度），其宽度可能仅等于子元素的最大内容宽度。

uni-app中image会相对于这个未明确的父容器宽度计算，若父容器宽度未被撑开，就会出现宽度为0的情况。

uni-app中<image>组件未设置宽高时，默认宽度320px、高度240px。

解决

给设置了width: 100%的image元素的父容器添加width: 100%样式即可。

参考文档

https://uniapp.dcloud.net.cn/component/image.html