CODEWITHSUNDEEP
reactjsjsx
Rylan Schaeffer
Rylan Schaeffer

Reputation: 2653

How to preload images in React?

I have an array of images, e.g.

var imgsArray = [];
imgsArray[0] = new Image();
imgsArray[0].src = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Queen_Elizabeth_II_in_March_2015.jpg";
imgsArray[1] = new Image();
imgsArray[1].src = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Queen_Elizabeth_II_in_March_2015.jpg";

I would like to add the images in this array to the JSX returned by a React component. How do I do this?

I tried the following:

<ImageList cols={1}>
  {imgsArray.map((img) => (
    <ImageListItem key={img.src}>
      img
    </ImageListItem>
</ImageList>

But no images appeared, nor did any errors appear.

I also tried placing curly braces around img i.e. {img} and received the error:

Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement]). If you meant to render a collection of children, use an array instead.

Upvotes: 2

Views: 7022

Answers (1)

Camilo
Camilo

Reputation: 7184

Instantiating the element and setting the src property is enough to start preloading the image, there is no need to attach it to the DOM.

const images = ['someImageUrl.jpg', 'someOtherImageUrl.jpg'];

for (const image of images) {
  const imageElement = new Image();
  imageElement.src = image;
}

<ImageList>
  {images.map((img) => (
    <ImageListItem key={img}>
      <img src={img} />
    </ImageListItem>
  ))}
</ImageList>

Upvotes: 5

Related Questions