CODEWITHSUNDEEP
htmlimagerandomrequest
user1141796
user1141796

Reputation: 334

Generate random image by url

I have an API with the endpoints:

Whenever I make a call for a random image, like 5 times on one web page, 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 one web page. Is there a way that this is possible?

Upvotes: 11

Views: 137191

Answers (6)

dipenparmar12
dipenparmar12

Reputation: 3485

⚠️ As of 2024

https://source.unsplash.com/random deprecated

API that's simple to use. It will redirect you to a random image every 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()}

Upvotes: 10

kissu
kissu

Reputation: 46814

I used to recommend source.unsplash.com but Unsplash is doing some shenanigans with this legacy project and overall deprecate it, on top of it being constantly up and down.

I recommend using something else that does the job just as well.

<img src="https://loremflickr.com/200/200?random=1" />
<img src="https://loremflickr.com/200/200?random=2" />
<img src="https://loremflickr.com/200/200?random=3" />

Upvotes: 27

Carlos Bustamante
Carlos Bustamante

Reputation: 1

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

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

Upvotes: 0

Rajdip Shah
Rajdip Shah

Reputation: 21

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)} ;

Upvotes: 2

Sagodi97
Sagodi97

Reputation: 285

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

Upvotes: 20

User1010
User1010

Reputation: 819

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

Upvotes: 5

Related Questions