Generate random image by url

user_1141796 0
Viewed 52949

I have an API with the endpoints:

  • api/image/1 Returns me the image 1
  • api/image/random Gives me a random image

Whenever I make a call for a random image, like 5 times on 1 webpage, each time it's the same image. It's a little bit like https://picsum.photos/seed/picsum/200/300...

I would like to have a random image, each time. Even if I call for a random image 10 times on 1 webpage. Is there a way that this is possible?

request api random image html
6 Answers

They actually address this common issue in their documentation. Interestingly, you're using their recommendation to achieve the complete opposite:

Static Random Image
Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the URL.

https://picsum.photos/seed/picsum/200/300

Solution

According to Picsum, you could do:

To request multiple images of the same size in your browser, add the random query param to prevent the images from being cached: <img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

Which results in:

Additionally, you can always get a list of URLs using their API, it allows you to define the number of images and many more things. I would suggest to actually read the small guide they put up on their site

user_102555270

As stated in this github issue, you can basically use https://source.unsplash.com/random/200x200?sig=incrementingIdentifier.

<img src="https://source.unsplash.com/random/200x200?sig=1" />
<img src="https://source.unsplash.com/random/200x200?sig=2" />
<img src="https://source.unsplash.com/random/200x200?sig=3" />

user_88165850

Here is most popular and stable API, Simple and easy to use, which will redirect you to random image every single time.

URL

https://source.unsplash.com/random/300x200

Syntax

https://source.unsplash.com/random/<width>x<height>

Here is JS trick to get unique image on every request

https://source.unsplash.com/random/300x200?sig=${Math.random()}

user_85929180

This is caused by browser caching as your are effectively requesting the same image, this can be seen in this screen grab from my browser,

Two lines of code,

<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">

One server request,

enter image description here

Depending on what language you are using you will need to add some element of random to the url, 

<img src="https://picsum.photos/200/300?nocache=<?php echo microtime(); ?>" >
<img src="https://picsum.photos/200/300?nocache=<?php echo microtime(); ?>">

I have added microtime() here in PHP, the use of microtime is significant as using time() will not always provide a different request url if the server and client are quick.

I now get two requests and two images, enter image description here

user_84587120

You need to random the numbers in your url; URL => https://picsum.photos/200/300?random=1

<img id = 'imgShow' />

document.getElementById('imgShow').src = 'https://picsum.photos/'+(200+rand())+'/' + (300 + rand()) +'?random=1';}

function rand(){ return Math.floor(Math.random() * 90)} ;
user_122503920

In seeder/factory of Laravel(PHP) you can use something like:

'url' => 'https://picsum.photos/1024/1024?nocache='.microtime()
user_183521030
Related