记一次鸿蒙webview图片渲染失败的问题

记一次鸿蒙webview图片渲染失败的问题

如上图,在鸿蒙手机内h5部分页面中的图片渲染不出来,一开始以为是图片地址有问题,但是安卓和IOS页面中的图片都能正常渲染,而且吧图片复制出来在浏览器图片可能正常展示,本地开发环境和测试环境h5图片也能正常加载,于是排除了图片地址的问题

思来想去,不知道如何查看,因为是线上环境没办法用charles抓包,既然没办法用charles,那能不能调试一下webview里面的h5,去华为官网搜了下,果然可以调试

通过浏览器调试工具,可以看到接口以及图片的信息,经过一番对比,发现只要是http协议的图片都不能加载出来

猜测可能是https的域名加载了http协议的图片,于是去查webview相关的文档,果然有个属性**mixedMode默认的 mixedMode**不能从https域名加载http协议的资源

于是将Web组件的mixedMode设置为MixedMode.All,图片就可以正常展示出来了

示例代码如下:

jsx 复制代码
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: MixedMode = MixedMode.All;
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mixedMode(this.mode)
    }
  }
}
相关推荐
ObjectX前端实验室27 分钟前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js
北城以北88882 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室2 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js
tanxiaomi3 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation973 小时前
Android App Links 配置
前端
FuckPatience3 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
sophie旭3 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(三)
前端·面试·性能优化
_waylau4 小时前
如何将鸿蒙5应用升级到鸿蒙6
华为·harmonyos·鸿蒙·鸿蒙系统
开心不就得了4 小时前
构建工具webpack
前端·webpack·rust
gerrgwg4 小时前
Flutter中实现Hero Page Route效果
前端