关于html：img.com中的图像未显示在网站上


images from imgur.com is not displaying on website

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

1
<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标签。

可能是什么原因？

相关讨论

1
2
3
4
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中有此内容：

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

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

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

或者将其完全删除。

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

1
2
3
4
5
[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.

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

Refused to load the image 'http://i.imgur.com/GAXEkpu.jpg' because it violates the following Content Security Policy directive:"default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

您已包括：

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

页面中的

，禁止在其他域上将<img>元素与src一起使用。

快速查看控制台可知，您遇到了许多安全错误。

Refused to load the image 'http://i.imgur.com/GAXEkpu.jpg' because it
violates the following Content Security Policy directive:"default-src
'self'". Note that 'img-src' was not explicitly set, so 'default-src'
is used as a fallback.

发生这种情况是因为：

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

该行代码禁止来自国外的内容。