今天解決一個線上bug的時候發現的問題，如下圖：

從表象來看，同樣的圖片，安卓手機上可以正常展示，但是到ios手機上首次進入頁面就不能正常顯示圖片，必須手動刷新一次頁面才能正常加載。

這時候，我們首先會考慮是不是ios設備的兼容問題？

於是乎，第一想到的就是問度娘，ios手機瀏覽器不能正常展示圖片是什麽原因？這麽泛泛的問題，想找到你的答案如同大海撈針。

其次想到的就是在本地環境調試一下，結果測試機在本地環境看是正常的，線上環境看問題復現率100%。這時就想著看看圖片資源路徑有什麽差異，為什麽上面的圖片不展示，下面的都正常展示了？

答案是：我們網站訪問強制切換https安全協議，而接口提供的圖片資源時http協議的。於是就引發了上面的問題，因為https地址中，如果加載了http資源，瀏覽器將認為這是不安全的資源，將會默認阻止，這就會給你帶來資源不全的問題了，比如：圖片顯示不了，樣式加載不了，JS加載不了。

參考文章：

https://www.cnblogs.com/yougewe/p/7440008.html

https加載http資源，導致ios手機上的瀏覽器圖片加載問題