如何在URL损坏时在React中显示虚拟图像？

Question

我的代码

import React, { Component } from 'react';
import './App.css';


class App extends Component {
  state = {
    loaded: false,
    error: false
  }

  onImageLoad = () => {
    this.setState({
      loaded: true
    })
  }

  onImageError = () => {
    this.setState({
      error: true
    });

  }

  render() {
    // let imgSrc = (!error) ? src: fallbackSrc
    return (
     <div>
        <img src= {'https://unsplash.com/photos/wQLAGv4_OYs'} alt={'Wresting Character'} onLoad={() => this.onImageLoad()} onError={require('../src/images/batista.jpg')} />
      </div>
    )
  }
}



export default App;

如果URL损坏，我想显示后备图像。现在，显示默认图像，但是如果我更改其URL，页面将引发错误。万一我的链接断开了，我如何显示虚拟图像。

Answer 1

一旦发生错误，您可以回退到默认图像：

onImageError = (ev) => {
  this.setState({
    error: true
  });
  ev.target.src = 'some default image url';
}

Answer 2

我宁愿在onerror标签上使用onerror属性。您可以定义错误的处理程序，然后将目标源属性替换为后备网址。