uni-app 的 image 组件无全局默认 mode，必须每次显式声明；不写会导致各平台行为不一致，最稳妥做法是封装 myimage 组件并设默认 mode="aspectfill"。
uni-app 的 image 组件没有全局默认 mode
这是最容易被误解的一点：uni-app 没有像 CSS 的 object-fit 那样可设全局默认值的机制。image 组件每次渲染都必须显式声明 mode，不写就等价于没设置——此时各平台行为不一致：
微信小程序会 fallback 到 scaleToFill，H5 可能表现为空白或按原尺寸渲染，App 端则可能直接拉伸变形。所以“不写” ≠ “安全”，而是等于埋坑。
最稳妥的写法是每次用 image 都带上 mode
别依赖平台默认，也别试图在 main.js 或 App.vue 里通过样式覆盖。实际开发中应统一约定基础模式，并封装成自定义组件来降低出错概率：
- 九宫格缩略图、卡片封面图 → 固定用
mode="aspectFill"（填满无黑边，适合预览） - 头像类图片 →
mode="aspectFill"+ 后端返回已裁剪的正方形缩略图（避免前端硬裁切掉人脸） - 详情页大图、海报图 →
mode="widthFix"（宽度铺满，高度自适应，保留完整内容） - 绝对禁止在业务代码里漏写
mode，尤其在v-for渲染列表时
mode="aspectFill" 是多数场景的起点，但要注意裁剪风险
它确实最常用，但“填满”是以牺牲部分内容为代价的。关键点在于：
- 图片中心区域会被保留，上下/左右边缘可能被切掉 —— 人像、LOGO、文字居中的图容易出问题
- 不同设备屏幕宽高比差异大（比如 iPhone 15 Pro Max vs 华为 Mate 60），同一张图在不同机型上裁剪位置不同
- 如果服务端无法提供带智能裁剪（如 focal point）的缩略图 URL，前端只能靠
mode="top"或mode="bottom"手动控制裁剪起始边，但这些值不支持响应式
想模拟“全局默认”，只能靠封装组件
真正可行的方式是写一个 MyImage 组件，在内部固定 mode 并透传其他 props：
<template><image :src="src" :mode="mode" v-bind="$attrs"></image></template><script>
export default {
name: 'MyImage',
props: {
src: String,
mode: {
type: String,
default: 'aspectFill' // 这里才是你可控的“默认”
}
}
}
</script>
这样所有地方用 <my-image src="..."></my-image> 就自动带上了 mode，漏写的概率大幅下降。但注意：仍要确保该组件在所有平台都经过真机验证，特别是 heightFix 在旧版微信小程序基础库中不可用。
真正麻烦的不是选哪个 mode，而是忘记写 mode —— 一旦漏掉，问题往往只在特定机型或网络条件下才暴露，查起来费时间。
