Random image link render the same across a list of element

Question

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

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

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.

Answer 1

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} 
/>

Answer 2

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