在 Javascript 中处理多个图像回退

Question

Is there a way to handle multiple image fallbacks in plain Javascript or in React?

I know we can handle one fallback image with onError(). What if we want to do another fallback image?

Thanks in advance!

Answer 1

The image's onerror callback will be called each time you set a src that causes an error.

So for a native js solution you can keep a list of fallback images, and incrementally go through that list each time the callback is called until it is exhausted.

 var fallbacks = ["1.jpg","2.jpg","https://placebear.com/g/100/100","4.jpg"]; var image = new Image; image.dataset["fallback"] = 0; image.onerror = function(){ console.log("onerror triggered"); var fallbackIndex = this.dataset["fallback"]; //check to see if we exhausted the fallbacks if(fallbackIndex > fallbacks.length-1) return; //set the fallback image this.src = fallbacks[fallbackIndex]; //increment the index incase onerror is called again image.dataset["fallback"]++; } document.body.appendChild(image); image.src = "doesntexist.jpg";

Note you don't have to keep the fallbacks in javascript. You could place the fallbacks into a data attribute on the element itself and retrieve it through the dataset property

 document.querySelector("img").addEventListener("error",function(){ var fallbackIndex = this.dataset["fallback"]; var fallbacks = this.dataset["fallbacks"].split(","); if(fallbackIndex > fallbacks.length-1) return; this.src = fallbacks[fallbackIndex]; this.dataset["fallback"]++; });

 <img src="" data-fallback="0" data-fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />

For react you would basically do the same thing but through their syntax, full demo

class ImageWithFallbacks extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      src: props.src,
      fallbackIndex: 0
    }
    this.props.fallbacks = this.props.fallbacks.split(",");
  }
  onError() {
    console.log("errored",this.state.fallbackIndex);
    if(this.state.fallbackIndex > this.props.fallbacks.length){
       return;
    }
    this.setState({
      src: this.props.fallbacks[this.state.fallbackIndex],
      fallbackIndex: this.state.fallbackIndex+1
    });
  }
  render() {
    return <img src={this.state.src} onError={()=>this.onError()} />;
  }
}

---

<ImageWithFallbacks src="nonexistent.jpg" fallbacks="1.jpg,2.jpg,https://placebear.com/g/100/100,4.jpg" />

Answer 2

There are many other good answers. Anyone who needs to share how I solved it, try this.

<img
    src={1st Image url}
    data-src={2nd Image url}
    alt=""
    className=""
    onError={e => {
       if(e.target.dataset.src === 'resize') {
          e.target.src = 'this is your final image. if 1st 2nd all 404, then this image will be shown'
          e.target.dataset.src = 'null'
       }
       if(e.target.dataset.src !== 'null') {
         e.target.src = e.target.dataset.src;
         e.target.dataset.src = 'resize';
       }
    }}
/>

I use data-src as a variable.