正确实现方式是用自定义组件+定位控制：外层view设position: relative，图片与Loading同级置于其中，Loading用absolute+top/left 50%+transform居中；用loadingMap对象独立管理每张图状态，v-if控制显隐，小程序用cover-view避免遮罩问题，Loading需设固定宽高。
uni-app图片中心显示Loading的正确实现方式
直接用 uni.showLoading 无法精准定位到某张图片中心，它默认全屏居中；想让Loading只出现在单张图片正中央，必须放弃全局API，改用自定义组件 + 定位控制。
用绝对定位+relative父容器把Loading钉在图片上
核心是让Loading元素和image共享同一个定位上下文。常见错误是直接给image加position: relative然后子元素absolute——但image在小程序/App端不支持position属性，会失效。
- 外层套一个
<view class="image-wrapper"></view>，并设position: relative -
image放在里面，宽高固定（如width: 300rpx; height: 200rpx;） - Loading组件（比如一个
<view class="loading"></view>）也放进去，设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 务必用
v-if控制Loading显隐，别用v-show——后者保留DOM，可能遮挡点击或触发误触
加载状态管理要按图隔离，不能共用一个变量
列表里多张图如果都用同一个isLoading布尔值，一点就全亮；实际需要每个图独立开关。错误写法：data() { return { isLoading: false } }；正确做法是用对象映射或数组索引绑定。
- 推荐用
loadingMap对象：data() { return { loadingMap: {} } } - 模板中：
v-if="loadingMap[item.id]"，@click="triggerLoad(item.id)" - 方法里：
this.loadingMap[itemId] = true→ 请求 →this.$nextTick(() => this.loadingMap[itemId] = false) - 别漏掉
$nextTick：否则Vue可能来不及更新DOM，导致Loading一闪即逝或残留
小程序平台特别注意canvas遮罩兼容性
微信/支付宝小程序里，view层级有时会被image穿透，尤其当image设置了mode="aspectFill"且内容超出容器时，Loading可能被裁掉或错位。
- 解决方案：改用
<cover-view></cover-view>包裹Loading（仅限小程序），它能稳定浮在image之上 - H5和App端仍用普通
view+z-index即可，但需确保父容器z-index不为负 - 不要给Loading加
opacity: 0.8再配深色背景——部分安卓WebView会闪白，改用background: rgba(0,0,0,0.15)更稳
最易被忽略的是：Loading动画本身尺寸没约束。一个没设宽高的view在不同端渲染高度可能从20px到60px不等，导致“中心”实际偏移。务必给Loading元素设固定宽高（如width: 40rpx; height: 40rpx;）并配合transform: translate(-50%, -50%)，否则所谓“居中”只是幻觉。
