我有一个应该显示 Facebook 图标的简单代码块:
<div class="icon">
<a href="http://www.facebook.com" onclick="window.open(' https://www.facebook.com/','newwindow','width=600, height=300');return false;">
<img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/facebook.png" alt="Facebook"/>
</a>
</div>
在页面上，它显示为损坏的图像，但是当我测试了 JSFiddle 中的代码时， 有用？ (图像是白色的，可能需要拖动图像才能看到)。
为什么会这样？
编辑:
这是测试页的[预览链接][2]。
最佳答案
现在有了链接就更容易了，你已经混合了安全和不安全的内容(即 http 和 httpS)。转到浏览器的开发人员工具(通常是 F12 键)，您将看到以下错误:
Mixed Content: The page at 'https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=1870680&tc_deviceCategory=desktop&template_layout_id=5498485491' was loaded over HTTPS, but requested an insecure image 'http://content.t-three.com/hubfs/Images/Templates/Landing_Page/facebook.png'. This request has been blocked; the content must be served over HTTPS.
它要么都需要是“http”或“https”，你不能混合这两者。你的浏览器认为你在安全页面上加载不安全的内容。
所以:
<img src="httpS://...
关于html - 图片在网页上损坏，但在其他地方测试时有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48093470/