UNI-APP在iOS系统中加载来源于微信公众号的文章时（html片段），某些图片显示不出来的问题解决
2024-06-06 10:31:51
如题，在做UNI-APP开发时，调用接口返回html片段，页面使用mp-html扩展组件进行加载。
<mp-html container-style="padding:20px" :content="html" />接口返回html片段如下：
{"msgCode": "0","message": "成功","data": {"id": 10,"path": "","update_time": "2021-04-21 08:43:05.0","top_time": "2021-04-21 08:43:01.0","industry_id": 15,"content": "<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz/xe1HsXLoRkPmcVJuVuricScHSZKwvoM5hQRWMS5tiaicFb20nZQvnkSmZXm5kBsOSz3MJxoEsUFUFqAYGPufvpjhQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p><br/></p><p><br/></p><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\"></span></section><p><br/></p><p><br/></p><p style=\"margin-top: 10px; margin-bottom: 10px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDOQBOD4jVPsHaDYyPM3vjVqYgdYV6iaWmfhP4c9oqIYcxpiaVEbSic5FOw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p style=\"margin-top: 10px; margin-bottom: 10px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDOQBOD4jVPsHaDYyPM3vjVqYgdYV6iaWmfhP4c9oqIYcxpiaVEbSic5FOw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDTeYibKwQl7CbiawRlwGhxiazmAQwicmFvlsowA1h7A3x547sHCC4GH7v4Q/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p><br/></p><p><br/></p><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; text-indent: 2em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">4月13日，甘肃省建机协会会长赵贵生、专家王保瑞一行30余人到公司考察交流。</span></section><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">赵会长一行此次到访，令公司倍感亲切。寻本溯源，80年前，公司发端于甘肃兰州。与甘肃省建机协会有着血脉相连的至亲情缘。公司负责人向客人介绍，20年前，公司适应改革需要，从母体蝶变而出，虽然体制机制变了，但固有的红色基因不变，实现产业报国的初心不变</span></section><p><br/></p><p><br/></p><p style=\"margin-top: 15px; margin-bottom: 10px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: center; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDALEWw0Tib1mXzCbqJ21bVIicg3zwhA6icxOlZ24t64uEiaXJAv8o6ic9sAg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p><br/></p><p><br/></p><section><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDeAdCxWckicrVHoI6bt6v4mYMchbWup9B8XmJB0oCUJiafQlf8SDPmUWQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></section><section></section><section></section><p><br/></p><p><br/></p><p style=\"margin-top: 0px; margin-bottom: 15px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><br/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: justify; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; line-height: 1.75em; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; text-indent: 2em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">赵会长一行饶有兴致地参观了中石化四机石油机械有限公司陈列馆、凤凰新厂区产品展示场、产品装配车间、智能机器人自动化生产线等，并对智能升降机和智能塔机的发展、产品生产工艺，以及质量控制、管理模式等作了较为详细地了解。</span></p><p><br/></p><p><br/></p><section></section><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\"></span></section><p><br/></p><p><br/></p><p style=\"margin-top: 15px; margin-bottom: 15px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: justify; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; line-height: 1.75em; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; text-indent: 2em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">参观结束后，客主双方就产品质量与安全、科技进步、智能制造，以及战略合作事宜等进行了深入探讨与交流。</span><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; text-indent: 2em; box-sizing: border-box !important; overflow-wrap: break-word !important;\">赵会长对高质量发展、产品研发和在产业链中的带头作用给予了充分肯定，并对公司的创新氛围、研发能力给予了高度赞扬，对设备大量投入西北开发建设充满更多期待。</span></p><p><br/></p><p><br/></p><section></section><section></section><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">公司总经理黄保忠感谢赵会长一行对的大力支持与充分信赖。荆州与兰州纵然远隔数千里，但与甘肃省建机协会同根同源、守望相助的亲情，让我们会越走越近、合作会越来越深。唯有做强做优做精自己，以良好业绩回报故乡亲人，才能不负这份至尊情谊。</span></section><p><br/></p><p><br/></p><p style=\"margin-top: 15px; margin-bottom: 10px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDsscoYYCY2dlFR3h3Gp8Lwz858nNqXQPHGzI9jYtibsdfmA9briaZoMYQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p><br/></p><p><br/></p><section><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDGpoFfU1csFFb6ibyHGqIaOV0sBOQ0tWXsvZSngpQY10ibD5We94k5a6A/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></section><p><br/></p><p><br/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: justify; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; line-height: 1.75em; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">座谈交流会上，双方正式签订了战略合作协议。甘肃省协会还向特赠书有“质量铸就精品名牌 服务精致誉满金城”的致谢锦旗。</span></p><p style=\"margin-top: 15px; margin-bottom: 15px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><img class=\"rich_pages\" src=\"https://mmbiz.qpic.cn/mmbiz_jpg/xe1HsXLoRkNWlxaeVGEX1moibzcgUJ1sDKWmsg9QutlBW7byuA7p5a1jYklJJ9QCDxLTgpibM09W76SPkxKps7rA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1\" alt=\"图片\" style=\"margin: 0px; padding: 0px; box-sizing: border-box !important; overflow-wrap: break-word !important; height: auto !important; width: 677px !important; visibility: visible !important;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: justify; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; line-height: 1.75em; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">对此次活动非常重视，董事长李湘民、总经理黄保忠接待并参加活动，公司多名中高层管理人员陪同接待。</span></p><p><br/></p><p><br/></p><section><span style=\"margin: 0px; padding: 0px; max-width: 100%; color: rgb(255, 169, 0); box-sizing: border-box !important; overflow-wrap: break-word !important;\"><strong style=\"margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;\"><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">君自故乡来，携手谋发展。</span></strong></span><span style=\"margin: 0px; padding: 0px; max-width: 100%; font-size: 16px; box-sizing: border-box !important; overflow-wrap: break-word !important;\">与甘肃省协会实现战略合作，将会促进资源聚合，优势叠加，定会在在互联互通中达成1+1>2的合作效果。</span></section><p><br/></p>","top": 1,"photo_url": "/upload/user_feedback/20210421084253861937.JPG"}
}this.html = res.data.data.content;真机运行，在Android环境下页面正常显示，图片可以正常加载，在iOS环境下，只显示文字，图片显示不正常。
测试发现，在iOS PC端去掉“&tp=webp”部分，提示“图片来自于微信，限制访问”，而且iOS手机端也可以正常显示图片，故做如下处理：
//判断系统类型，解决ios系统部分微信公众号图片显示不出来的问题if (uni.getSystemInfoSync().platform == 'ios') {//删掉html片段中的‘&tp=webp’var reg = new RegExp('&tp=webp', "g");var newstr = res.data.data.content.replace(reg, '');this.html = newstr;}else{this.html = res.data.data.content;}虽然有点莫名其妙，但是还好问题解决了。
完！！！
UNI-APP在iOS系统中加载来源于微信公众号的文章时（html片段），某些图片显示不出来的问题解决相关推荐
- ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法
IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...
- 微信公众号的文章中添加历史文章链接
微信公众号的文章中可以添加以往文章的链接哦~ 工具/原料 电脑 微信公众号 方法/步骤 首先,登录你的微信公众号, 编辑文章,将光标停留在你想添加链接的地方,点击右上角的超链接标识 然后你会看到这样的 ...
- 如何在微信公众号的文章推送中展示bilibili的视频
0x00 需求背景: 我们学院举办了一个短视频设计大赛,需要在官方公众号里进行线上投票,选出大家最喜欢的视频. 然而微信公众号的文章推送中,限制了每篇文章只能上传三部视频,而我们需要把三十部作品都放 ...
- iOS:xib中加载自定义的xib控件, 解决死循环
咱就举个栗子: 我一个tableviewcell.xib(A) 中要使用一个我自定义好的一个 view.xib(B) 在A中拖好控件后, 需要在B中的.m文件中重写 initWithCode:(NSC ...
- python信息检索和评价系统_Python爬虫实现的微信公众号文章下载器
所以我就想有什么方法能否将这些公众号文章下载下来.这样的话,看起来也方便.但是网上的方法要么太复杂(对于我这个爬虫入门新手来说),要么付费. 但我的需求其实却很简单--"方便的查找 / 检索 ...
- jsp中设置自动换行_微信公众号文章中如何设置自动回复？
小客服 大家一定都清楚微信公众号的输入关键字就自动回复功能,像这样,我进入一个指定的微信公众号,在聊天界面发送关键字,比如:英语四六级,立马就会弹出相应的资料或链接给我.但是这种便捷的方式没法在文章中 ...
- Android和ios速度,不拼硬件拼体验 Android和iOS系统的加载速度测验
Android和iOS无疑是目前最为成功的两款手机操作系统,iOS是封闭的,只有苹果自家可以搭载使用,目前已有八代产品,最新一代产品为iPhone 6和iPhone 6 Plus.而具有开源免费优势的 ...
- iOS 同一页面加载上百张图片，迅速滑动时导致内存暴涨程序崩溃的参考解决方法
本例中项目大致流程是先由客户端拍照或者选择图库中的图片进行上传,然后可以从详情页面中浏览所有上传的图片,由于图片是按照相册进行分类,而每个相册中最多可以有50张照片,极限的情况是详情页面最多可以有20 ...
- vue中通过WeixinJSBridge关闭微信公众号当前页面，返回微信公众号首页
setTimeout(function() {//这个可以关闭安卓系统的手机document.addEventListener("WeixinJSBridgeReady",func ...
- 微信公众号编辑文章发布时，弹出，图文消息中含有敏感词
在写文章的时候,会遇到以下3种情况: 1.你所编辑的图文消息可能含有敏感内容,你可以继续保存或发布该图文消息(发布等待时长约3-4小时),若保存或发布后,经核实含有敏感内容的,将可能被作删除.屏蔽等处 ...
最新文章
- Cassandra 可视化工具
- 使用.NET类库操作CSV文件
- android 存储不被垃圾清理,手机内存足够大,就不需要清理垃圾了?你错了!
- 【gRPC基础知识】快速部署
- java对象的浅克隆和深克隆
- 百度网盘就“用户激励计划”道歉；沈义人卸任 OPPO 全球营销总裁；Python 2.7.18 发布| 极客头条...
- linux常用文件及作用总结(profile/.bashrc等)
- 无法创建java虚拟机_创建java虚拟机失败的解决方法
- C#使用欧姆龙PLC的Fins协议读写PLC地址(基本封装)
- 计算机网络之无线与移动网络－蜂窝网络
- android心率曲线绘制,巧妙绘制心率曲线图的方法实践
- Android Studio开发手机APP(二)-利用MQTT通信开发物联网程序
- 【Python数据挖掘课程】八.关联规则挖掘及Apriori实现购物推荐
- springboot+党员信息管理系统 毕业设计-附源码161528
- 巴比特独家 | 区块链入选新基建，这几件事你不得不知
- 软件质量保证和软件配置管理
- 在Windows中安装一些python的第三方库
- 春节特辑・戏说天津卫
- 店盈通：拼多多一个店铺推几个产品最好
- 洛谷 U28036 Nagisa loves Tomoya（推式子） 题解