HTML image not working

Question

I have a grid of images on my website, but some of the images randomly don't work. All the image sources are links, which are all generated from the same place. I'll show an example, with an image that works and one that doesn't:

http://codepen.io/anon/pen/mJmaZE

As you can see the second image doesn't work, but if you visit the source link the image is there. Why is this happening?

Answer 1

The syntax of source URL is wrong.

Current syntax

src="steamcommunity-a.akamaihd.net/xx"

This is a relative path which will point to http://codepen.io/anon/pen/mJmaZE/steamcommunity-a.akamaihd.net/xx

Correct syntax

src="http://steamcommunity-a.akamaihd.net/xx" 

which will request the intended CDN url.

Answer 2

the content of the src attribute is lacking the prefix http:// . when addint it, it displays the image correctly. otherwise, it interprets the URL as a relative URL in the context of the embedding web page.

Answer 3

The second image is missing the http:// part. That means, the browser doesn't know it should look at a different server, but tries to access it at the same server, where the HTML file is hosted.