记一次ios下h5页面图片显示问题

刚入职公司时做了一个移动端图片预览的组件，之前也有业务组用过，没发现什么问题，但是这次有两个很诡异的问题。

一个是老数据的图不显示，另一个是图片点击预览只显示一部分加载不全。之所以诡异是所有设备都没问题就ios下有问题，其中老数据图不显示还是ios系统版本13及一下才有的。被这个问题困扰了好几天，经过一系列艰难排查最终两个问题都妥善解决。

 

第一个问题原因是该图是webp格式的，伪装成了jpg格式（后缀为.jpg）。然而ios13及以下是不支持webp格式的文件的，所以图片显示空白。

第二个问题是接口返回的图片url是在浏览器打开直接下载的，而之前是在浏览器直接显示的，我在预览组件里用了loading效果，new 了一个Image对象，赋值url监听onload事件，然后去除loading再渲染img标签并给src赋值。这样导致一个问题就是一张图片在几段时间里会被加载两次。而这次的图片url又是可以直接下载图片的，所以ios系统在第二次img加载图片时判断重复加载从而终止请求导致图片只显示一部分。最后解决方案是把new Image的步骤去掉了，直接赋值给img标签，然后监听img标签的onload事件来判断loading效果，这样更直观。最终完美解决。