来自 imgur.com 的图像未显示在网站上

Question

我正在使用简单的 html 标签来显示来自 imgur.com 的图像：

<img alt="Modern Dashboard Design" src="http://i.imgur.com/yst7lV9.png?1" style="height:550px; width:1024px" />

几天前这还可以，但现在不显示了。图像在 jsfiddle 上显示，但在此页面上不显示：

http://www.ucom.my/p/admin-page-for-website-50

当您查看页面源代码时，您会发现

img

标签。

可能是什么原因？

Answer 1

Content Security Policy: The page’s settings blocked the loading of a resource at http://i.imgur.com/2qEeCDA.png (“default-src http://www.ucom.my”).
Content Security Policy: The page’s settings blocked the loading of a resource at http://i.imgur.com/yst7lV9.png?1 (“default-src http://www.ucom.my”).
Content Security Policy: The page’s settings blocked the loading of a resource at http://i.imgur.com/GAXEkpu.jpg (“default-src http://www.ucom.my”).
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://www.ucom.my”).

打开 Firebug 控制台时可以看到这一点。

您的

head

中有这个：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

这意味着您故意阻止了对 imgur 或其他任何地方的所有请求。改成这样：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src example.com;">

或者直接将其完全删除。

Answer 2

快速查看您的控制台，我会发现您有大量安全错误。

拒绝加载图像“”，因为它 违反以下内容安全策略指令：“default-src 'self'”。请注意，'img-src' 未显式设置，因此 'default-src' 用作后备。

发生这种情况是因为：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

存在这行代码，禁止来自国外的内容。

Answer 3

打开浏览器的开发者工具。查看控制台。 阅读错误消息。

拒绝加载图像“”，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，“img-src”未明确设置，因此“default-src”用作后备。

您已包括：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

在您的页面中，禁止在不同域上使用带有

<img>

的

src

元素。

Answer 4

查看您的浏览器检查器... 它说：

[Error] Refused to load http://i.imgur.com/2qEeCDA.png because it appears in neither the img-src directive nor the default-src directive of the Content Security Policy.
[Error] Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy. (admin-page-for-website-50, line 87)
[Error] Refused to load http://i.imgur.com/yst7lV9.png?1 because it appears in neither the img-src directive nor the default-src directive of the Content Security Policy.
[Error] Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy. (admin-page-for-website-50, line 89)
[Error] Refused to load http://i.imgur.com/GAXEkpu.jpg because it appears in neither the img-src directive nor the default-src directive of the Content Security Policy.

Answer 5

<img src="http://i.imgur.com/yst7lV9.png?1" referrerpolicy="no-referrer" alt="dashboard">

• 使用属性referrerpolicy =“no-referrer”
• 检查this以获取解决此问题的替代方法