a function that adds a random image shows the same image everytime

Question

I have a simple function that creates an image and the src is a random image from splash, but every time i call the function it generates the same image, why and how to fix it

function randomImage(){
    const img = document.createElement('img')
    img.src = 'https://source.unsplash.com/random/500x500'
    document.body.appendChild(img)
}

As far as i understand each function call is dependent from each other so why each function call in this example generates the same image despite the link itself should generate a random link

you aren't doing anything to force a refresh. consider adding some entropy to the query string — Daniel A. White, Jan 17 '22 at 17:22
That end point seems to return the same image for a bit before it returns a new one. — epascarello, Jan 17 '22 at 17:25

score 1 · Accepted Answer · answered Jan 17 '22 at 17:22

1

You do not generate a random link. You depend on the source.unsplash.com to return a random image.

But since your browser page has seen that url, it loads it from the cache.

You could add something random, to make the browser think it is a different url.

img.src = 'https://source.unsplash.com/random/500x500&timestamp=' + Date.now()

answered Jan 17 '22 at 17:22

Gabriele Petrioli

191,379
34
261
317

Thank you so much, that works – Taste of Leaving Jan 17 '22 at 17:27

gru · Answer 2 · 2022-01-17T17:28:02.590

0

You could simply add a cache breaker to your URL, since the browser caches your request and returns the same image.

img.src = 'https://source.unsplash.com/random/500x500?t=' + new Date().getTime()

See also: Refresh image with a new one at the same url

edited Jan 17 '22 at 17:28

answered Jan 17 '22 at 17:27

gru

2,319
6
24
39

1

Thank you so much, that works – Taste of Leaving Jan 17 '22 at 17:27
You're welcome! Please accept the answer then. :) – gru Jan 17 '22 at 17:28

a function that adds a random image shows the same image everytime

2 Answers2