CODEWITHSUNDEEP
javascriptreactjs
ThomasThiebaud
ThomasThiebaud

Reputation: 11989

Random image link render the same across a list of element

I'm using react-toolbox and I would like to render a list (List) of items (ListItem) with random images as an avatar. I found this link http://lorempixel.com/ which allow you to easily get a random image.

My item looks like 

<ListItem
  avatar={'http://lorempixel.com/50/50'}
  caption={name} 
/>

and each time I create a new item I have a random image like this

enter image description here

But if I refresh the page, all the images become the same

enter image description here

All my items are different, so why are the image the same ? If I refresh again an again, the image change, but it is still the same for all the items.

Upvotes: 0

Views: 456

Answers (2)

Mircea
Mircea

Reputation: 153

Most probably having the same URL, the browser will not download the image again for each occurrence, so you should add a unique identifier:

<ListItem
  avatar={`http://lorempixel.com/50/50?${Math.random()`}
  caption={name} 
/>

Upvotes: 3

Stavros
Stavros

Reputation: 665

Lorempixels returns a new image every time you request one but the browser only resolves the request once since its the same url.

Try appending a random string as a get argument for each item. Check the answer on this SO question for more info Disable cache for some images

Upvotes: 2

Related Questions