在页面加载时使用默认图像，然后覆盖它

Question

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

Answer 1

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.

Answer 2

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!

Answer 3

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 in the image tag.

: 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 to your script.

If you press 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">