react 中实现加载默认图

我们开发含有大量图片列表页的时候，一定碰到过有些图片加载失败的情况。比如浏览器获取到了接口返回的图片地址，但状态码是404等非200的情况，这个时候可以设置一张等尺寸的默认图，优化体验。

img 标签的 onError 方法可以定位到加载失败的图片，我们只要在这个方法中将加载失败的图片设置为默认图片即可。可以通过 react ref 获取 img dom 节点，并修改 src 属性值。

 <img
    className="img-item"
    ref={(node) => (this.imageItem = node)}   
    onError={this.getDefaultImg} // 图片加载失败时调用
    src={url} // 接口返回图片地址
/>

 getDefaultImg = () => {
    // 图片加载失败时，获取img dom 节点，设置默认图片
    this.imageItem.src =
      "//test.com/default.png";
  };