记一次鸿蒙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)
    }
  }
}
相关推荐
两个西柚呀3 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H55 小时前
App开发框架调研对比
前端
桃子不吃李子5 小时前
axios的二次封装
前端·学习·axios
SteveJrong5 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~6 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发6 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii6 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack7 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好7 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O7 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js