移动端H5页面中加载的图片，在chrome和安卓手机中显示正常，在iphone和safari浏览器中个别图片显示问号的问题处理
最近开发了一个类似文章列表的页面，左边是图，右边是文字，配置在公众号中进行使用，测试通过以后线上运行发现个别项的图片在chrome和安卓手机下可以正常显示，在ios系统的sarafi下显示一个白方块中间一个蓝色的问号,如下图
排查的过程当然是先各种搜搜搜了，然后网上反馈的信息多种多样
1、查log，console下有如下信息，但是10张图10个提示都有，只有一张没显示，这不科学，我这只是warning，如果是error
请参考以下日志进行修改吧~我没用上这个信息，哈哈https://blog.csdn.net/Mr_YanYan/article/details/86679307
2、根据个例原理，开始觉得是图片不对劲，于是去请教了ios客户端的同学并搜集了一些资料，了解到ios下不支持webp类型的格式，webp类型：（WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布）
可是经过检查，上传的那张图片后缀是jpeg啊。。。惆怅
3、那有没有可能是图片编码的问题呢
于是委托运营人员发过来上传后出问题的图片，在图片网站https://www.sojson.com/image/info.html中进行了查看，
竟然是一只披着羊皮的狼，它顶着jpeg的后缀，类型却是webp类型的图片
4、至此找到了问题的原因，我们这边让运营更换了相应类型的图片，有余力的小伙伴可以和后端合作自己做一下在线图片类型的转换
特此总结希望能够帮到有需要的人
移动端H5页面中加载的图片，在chrome和安卓手机中显示正常，在iphone和safari浏览器中个别图片显示问号的问题处理相关推荐
- iphone的Safari浏览器中HTML5上传图片方向问题解决方法
前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多 ...
- h5页面文件加载不出来被浏览器当成广告屏蔽
问题:h5.shumensy.com/ad的js未加载 定位分析:上周重构了相关网页的目录结构 问题解决:手机浏览器对url请求设置关键字ad拦截,该网页的js目录结构为:ad/adindex,所以被 ...
- H5页面初次加载swiper导航切换按钮可以点击，刷新后就失效不可点击问题@令狐张豪
原因:加载顺序的问题,数据还没有完全加载的时候就已经渲染swiper了 解决方案:(在swiper加上这两行代码) observer:true,//修改swiper自己或子元素时,自动初始化swipe ...
- iphone的safari浏览器中实现全屏浏览的方法
正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了. 那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的. Add to Home Screen 说到全屏不得不谈i ...
- android 如何判断h5页面是否加载完成_H5 键盘兼容性小结
" 我们经常需要填写表单,键盘的行为存在各种差异." 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 in ...
- linux firefox applet,在HTTPS上的Firefox中加载Java Applet
我们开发了一个分析应用程序,它使用特殊的Java小程序(由IBM开发)来查看一些数据.这是一个在Apache上运行的Django应用程序.一切工作正常,直到我们转移到SSL.这种行为非常奇怪,我们感到 ...
- html中加载解析,HTML页面加载和解析流程详细介绍
序言: 我一直都认为"网页制作"这个词是一个不怎么高端的词,在我的印象中网页制作的词是没有生命力的一个制作,我喜欢用HTML 这样简单直接,这词凸显高端,有大气漂亮的UI.一套完美 ...
- QWidget中加载QML页面并设置透明背景
要在QWidget中加载QML页面首先要用到一个很重要的类QQuickWidget 示例: m_pQuickWidget = new QQuickWidget(this);m_pQuickWidget ...
- [react] 在react中页面重新加载时怎样保留数据？
[react] 在react中页面重新加载时怎样保留数据? 使用浏览器localstorage来保存应用程序的状态 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
- Twebbrowser从内存中加载页面
//从内存中加载页面(比加载htm文件速度快)uses ActiveX; procedure WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: tstring ...
最新文章
- 给 Easyui Datagrid 扩展方法
- Materialized Views
- linux中的进程有哪三种基本状态,Linux下的进程有哪三种状态？（）
- 查看python版本和django版本
- Doris之物化视图
- Project Euler Problem 14 Longest Collatz sequence
- 计算DataTable某列的值(SUM)
- 快速部署简单私有云CloudStack（下）
- Nginx ssl证书部署方法
- linux获取主板温度电压_主板供电
- 2019美赛B题完整论文
- Python（十七）- Excel操作：xlsxwriter绘制图表
- C盘清理 / 磁盘清理
- Node.js 整合 Express 框架实现微信支付和支付宝支付
- 学习markdown
- 英尺 厘米_在35,000英尺处重建747
- Pandas数据分析教程(2)-数据读取之普通索引、loc/iloc索引
- 软件测试面试题：你们公司的测试流程是怎么样的？
- JavaWeb基础（黑马配套）
- 2021编程语言排行榜出炉，C#年度语言奖