Unsplash photos not displaying? You might have a "hotlinking" issue.

Wait, what? Where all my photos from Unsplash have gone?

I hear you, I hear you...

So, I experiment a lot using CodePen.

My usual go-to place for gorgeous stock photography I can use on my code is Unsplash, the "The internet’s source for visuals".

So far so good. I used to search for the right photo(s) and use a formula, that looked something like this:

src='https://source.unsplash.com/' + photoID + '/500x320'

This used to work, up until last week I checked, but all my Pens are failing miserably, with a status code of 500 and I have a strong suspicion yours is too, that why you're here.

I'm not sure when this happened, and why, if you do, please leave me a comment.

With a quick search I found out that hotlinking an Unsplash photo has its guideline. This article was recently updated by the way. Go check it out, I'll wait.

So, following the guideline, the source of the image should rather look something like this:

https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80

Where do you get that code?

While you're browsing as usual, right click on the photo you want and select "Open image in a new tab". You'll find the basic code in the address bar. It's up to you to update the width/height/quality (w/h/q) it best fits on your design.

So, there you have it, how to fix the "broken" Unsplash Photos not displaying or, in other words, how to properly use Unsplash Images in your code.

Thank you, and happy coding!