7***@qq.com
7***@qq.com
  • 发布:2022-01-13 15:41
  • 更新:2022-04-22 11:15
  • 阅读:765

【报Bug】uni中web-view打开纯图片网页的页面问题

分类:uni小程序sdk

产品分类: uni小程序SDK

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米,魅族都有

手机机型: 魅蓝note,魅族18X

页面类型: vue

SDK版本号: 3.3.5

示例代码:

有问题的外部链接地址:https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/prod/MegatronWeb/13654124896/certify/202201/20220112__1641_9a6c8543d669492f8985743a170f05a2.png

操作步骤:

web-view里的src直接是外部链接图片网站地址。就会出现问题。有问题的外部链接地址:https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/prod/MegatronWeb/13654124896/certify/202201/20220112__1641_9a6c8543d669492f8985743a170f05a2.png

预期结果:

期望达到和内置浏览器,或者手机浏览器直接访问网址一样的效果

实际结果:

实际效果是图片没有自适应,而是原始宽度。

bug描述:

uni中web-view打开纯图片网页的页面问题。要在小程序上用,发现手机端,h5端都会有问题
看到之前有人反馈这个问题了,但是他后来没发外链地址。昨天官方群咨询了,让我发个新帖提供可复现问题的工程
之前人反馈问题的地址:https://ask.dcloud.net.cn/question/64497

第一张图是用我们内置浏览器直接打开的外部网页,显示是正常的,第二张图是使用uni-app中web-view打开的,显示的图片有问题,横向滚动,不会自适应宽度,第三张图是给我答复,所以我这里反馈了

2022-01-13 15:41 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

你可以自己审查一下放进去生成的结构。使用 web-view(iframe)加载图像,实际上还是会自动在外层套一层 html 结构,这个结构是不一定符合你预期的,且在 web-view(iframe)中渲染出来的样式和在顶层是不同的。

问一下,图片为什么不放到 image 中而直接放到 web-view(iframe) 中?

  • 7***@qq.com (作者)

    需求是网络图片可以直接在小程序上面渲染,方便用户阅读。我看web-view渲染和在顶层的区别了,顶层主要就是给那个网络图片有个width:100%的宽度。我们web-view设置wv.setStyle({scalable:true})地方,能加个max-width:100%的使用吗

    2022-01-15 09:45

  • DCloud_UNI_GSQ

    回复 7***@qq.com: 图片为什么不放到 image 中而直接放到 web-view(iframe) 中?

    2022-01-15 10:59

  • DCloud_UNI_GSQ

    回复 7@qq.com: 回复 7@qq.com: 你要修改的是html样式,不是web-view样式,如果你一定要用web-view加载图片你可以尝试通过获取web-view实例执行evalJS注入脚本和样式来调整到符合你预期。

    2022-01-15 11:02

  • 7***@qq.com (作者)

    回复 DCloud_UNI_GSQ: 后端返回的网络地址可能是网络图片,也可能不是网络图片,而是普通的文本信息网站,我这边再想想其他办法吧

    2022-01-19 09:32

f***@qq.com

f***@qq.com

我也遇到同样的问题,我加载的是网页,但是网页上的图片都变形了,直接用浏览器打开没有问题,用web-view打开就会出问题

  • DCloud_UNI_GSQ

    web-view毕竟不是完整浏览器,和浏览器相比还是有不同的预设样式,你自己注入样式即可一致

    2022-04-21 11:22

f***@qq.com

f***@qq.com

直接用window.open() 了,但是不知道怎么回调

该问题目前已经被锁定, 无法添加新回复