Get the source.unsplash url of the picture

Question

I am writing a website where I use this link from unsplash to get a random photo :

https://source.unsplash.com/random/1920x1080/?wallpaper,landscape

However, the photo returned by the unsplash changes on page reload. In the HTML source code of the loaded website, I can only see the same link as above.

How to get the URL of the original image as seen in the Application tab of Chrome Devtools :

https://images.unsplash.com/photo-1458571037713-913d8b481dc6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=1920

Answer 1

You can use axios library to fetch the image and get the response url :

let randomURL = 'https://source.unsplash.com/random/1920x1080/?wallpaper,landscape';

axios.get(randomURL).then( data => {
  // the url of the random img
  console.log(data.request.responseURL);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous"></script>

and with vanilla JS :

fetch("https://source.unsplash.com/random/1920x1080/?wallpaper,landscape").then( data => {
	console.log(data.url);                
});

and if you want to support old browsers :

request = new XMLHttpRequest();
request.open("GET", "https://source.unsplash.com/random/1920x1080/?wallpaper,landscape", true);
request.send(null);
request.onreadystatechange = function() {
	if (request.readyState === 4) {
		if (request.status === 200) {
			console.log(request.responseURL);
		}
	}
}