images from imgur.com is not displaying on website

Question

I am using simple html tag to display images from imgur.com:

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

this was working few days back, but now it is not showing. Image is displaying on jsfiddle,but not displaying on this page:

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

When you view the page source, you will find img tags.

What might be the reason?

Most likely cross domain requests are blocked. That is pretty much standard today. If that is the cause, then you need to set a header granting requests to that domain. — arkascha, Nov 08 '16 at 14:35
Refused to load the image 'http://i.imgur.com/2qEeCDA.png' 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. — Daniel Springer, Nov 08 '16 at 14:37
http://stackoverflow.com/questions/32166870/img-src-was-not-explicitly-set-so-default-src-is-used-as-a-fallback — Daniel Springer, Nov 08 '16 at 14:41
Google the errors that browser's tell you. You'll find SO questions just about that. — Daniel Springer, Nov 08 '16 at 14:43

score 2 · Answer 1 · answered Nov 08 '16 at 14:42

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”).

This can be seen when opening the Firebug console.

You have this in your head:

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

This means you have deliberately blocked all requests to imgur or anywhere else. Change it to this:

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

Or just remove it entirely.

score 0 · Answer 2 · answered Nov 08 '16 at 14:38

A quick look in your console tells me you have a LOAD of security errors.

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.

And this happens because:

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

this line of code exists which disallows content from foreign sources.

score 0 · Answer 3 · answered Nov 08 '16 at 14:38

Open your browser's developer tools. Look at the console. Read the error messages.

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.

You've included:

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

in your page, which bans the use of <img> elements with a src on a different domain.

score 0 · Answer 4 · answered Nov 08 '16 at 14:40

Have a look to your browser inspector... It says:

[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.

images from imgur.com is not displaying on website

4 Answers4