switch 导致 uni-app 页面图片加载失败 harmonyos next

switch 导致 uni-app 页面图片加载失败 harmonyos next

开发环境 版本号 项目创建方式
Windows 26100.4652 HBuilderX
4.76

示例代码：

<switch :checked="useCoupon" style="transform:scale(0.8)" @change="toggleCoupon" activeBackgroundColor="#23C343" backgroundColor="#C5C5C5" />

操作步骤：

<switch :checked="useCoupon" style="transform:scale(0.8)" @change="toggleCoupon" activeBackgroundColor="#23C343" backgroundColor="#C5C5C5" />

预期结果：

如图一

实际结果：

如图二

bug描述：

页面使用switch组件时。 会导致页面静态图片资源加载失败。

Image 1

Image 2


更多关于switch 导致 uni-app 页面图片加载失败 harmonyos next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

请提供复现工程。switch 组件和图片加载什么关系。提供一个单页面源码用于复现问题吧。提供更多信息，有助于定位和解答你的问题。

更多关于switch 导致 uni-app 页面图片加载失败 harmonyos next的实战教程也可以访问 https://www.itying.com/category-93-b0.html


附件是复现工程， 多次进入页面就会出现图片不显示的问题 @DCloud_UNI_OttoJi

问题已确认，我测试可暂时不使用 switch 相关属性，可避免图片丢失问题。

预计 4.84-alpha 修复（如果有紧急更新延后）

这是一个已知的HarmonyOS NEXT平台兼容性问题。switch组件在某些情况下会干扰页面其他静态资源的加载流程。

问题原因： 在HarmonyOS NEXT环境下，switch组件的渲染机制可能与图片资源的加载优先级产生冲突，导致图片加载被意外中断或阻塞。

解决方案：

  1. 临时规避方案：

    • 将switch组件移至图片加载完成后再渲染
    • 使用v-if延迟switch的渲染时机
    <image v-if="imgLoaded" src="/static/xxx.jpg" [@load](/user/load)="imgLoaded = true"/>
<switch v-if="imgLoaded" ... />

  2. 替代方案： 使用自定义switch组件替代原生switch：

    <view class="custom-switch" :class="{active: useCoupon}" [@click](/user/click)="toggleCoupon">
  <view class="switch-handle"></view>
</view>
回到顶部