I have a page which contains several images. When the page loads it provides a default image for each IMG:

import default from './pics/default.jpg';

<img src={default} alt="#"/>

What I want is something like this:

<img src1={default} src2="img url" alt="#"/>

Where src2 overwrites src1 when it is loaded.

Edit: The first image (src1) comes as the page loads while the second (src2) is requested trough the internet. Example: .jpg

I have a page which contains several images. When the page loads it provides a default image for each IMG:

import default from './pics/default.jpg';

<img src={default} alt="#"/>

What I want is something like this:

<img src1={default} src2="img url" alt="#"/>

Where src2 overwrites src1 when it is loaded.

Edit: The first image (src1) comes as the page loads while the second (src2) is requested trough the internet. Example: https://cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg

• javascript
• reactjs
• image

• Are the images coming from a reducer or an api request? – Rohit Kashyap Commented Aug 30, 2019 at 15:50
• 1 Set the source using a state value which will to re-render it when it is done via set state. – basic Commented Aug 30, 2019 at 15:50
• How should I do that @basic – Laczkó Örs Commented Aug 30, 2019 at 15:51
• 2 You can also checkout react-image. It seems to do what you want and has 0 dependencies. Here's the direct link to the documentation to do what you want. – technogeek1995 Commented Aug 30, 2019 at 15:52
• Possible duplicate of How to preload images in React.js? – Mehdi Yeganeh Commented Aug 30, 2019 at 15:58

3 Answers 3

Use the onLoad event on your <img> element. You can give it a display: none style until it finishes loading.

class ImageRoll extends React.Component {
  state = {loaded: false};
  
  showImage = () => {
    this.setState({loaded: true});
  }
  
  render() {
    return (
      <>
        <img src="/path-to-initial" style={ this.state.loaded ? {display: "none"} : {}} />
        <img src="/path-to-seocndary" onLoad={this.showImage} style={ this.state.loaded ? {} : {display: "none"}} />
      </>
    );
  }
}

Edit: As opposed to the other answers, the reason we want to do this is that replacing the src on an image is actually bad practice. If you want to roll an image it is better to have two <img> elements and toggle between them depending on conditions.

As I understand the situation, you want to load the first image with the page then after the page has loaded, replace the first image with an image from another source.

In the example below the default image is "https://via.placeholder.com/100", it is displayed as the page loads. The second image is "https://via.placeholder.com/300", and is displayed after page load is complete.

Set up all image tags by adding the attribute data-src="secondimage.jpg" in the image tag.

How this works: After page load is complete, the script loops over all img tags checking for the data-src attribute. If an img tag has a data-src attribute it replaces the src image with the address in data-src attribute.

If you want to pre-load the external secondary images just add new Image().src = "secondimage.jpg"; to your script.

If you press Run code snippet you will see the image shows 300 indicating the second image has replaced the first default one. See the commented section below for pre-loading secondary images if desired.

/*
uncomment if you want to pre-load the secondary images
new Image().src = 'https://via.placeholder.com/300';
new Image().src = 'https://via.placeholder.com/400';
new Image().src = 'https://via.placeholder.com/500';
... as many as necessary
*/

window.onload = function() {
	imgs = document.querySelectorAll('img');
	for (i = 0; i < imgs.length; i++) {
		if (imgs[i].getAttribute('data-src')) {
			imgs[i].setAttribute('src', imgs[i].getAttribute('data-src'));
		}
	}
}

<img data-src="https://via.placeholder.com/300" src="https://via.placeholder.com/100">

You can just update directly the src of the image, I have a sample on Code Sandbox.

This is the content:

function App() {
  const [imageSrc, setImageSrc] = React.useState("/placeholder.jpg");

  function loadImage() {
    setImageSrc(`https://picsum.photos/200?${Date.now()}`);
  }

  return (
    <div className="App">
      <div>
        <img alt="small-image" src={imageSrc} />
      </div>
      <div>
        <button onClick={loadImage}>Load Image!</button>
      </div>
    </div>
  );
}

This is just a basic example, you can implement your own logic. Hope this helps!