在 React 中对 img src 进行编程检查答案

【问题标题】：Programmatic check for img src in React在 React 中对 img src 进行编程检查
【发布时间】：2019-07-21 14:43:48
【问题描述】：

我在一个表格中有一个页面，上面有许多客户徽标。一个表格单元格尝试获取这样的徽标：

<TableCell className={classNames(classes.urlDealCell, classes.dealCell)}>
    {this.getLogo(deal.CompanyWebsite)}
</TableCell>

getLogo 是：

getLogo = url => {
  const source = `https://logo.clearbit.com/${url}`;
  return <img src={source} width="30" />;
};

80% 的情况下，徽标恢复正常，如果没有 deal.CompanyWebsite，我可以提供默认徽标。但我需要处理另一个极端情况：

如果对 img 源的请求失败并显示如下 URL： https://logo.clearbit.com/absoluteGarbage，我可以在 React 中检查这个并回退到默认徽标吗？

我必须在尝试分配img 的src 属性之前尝试对每个徽标的src URL 进行GET 请求吗？如果是这样，这将使图像请求的数量增加一倍，这将导致更大的页面结果集变得糟糕。

【问题讨论】：

【解决方案1】：

使用onError 属性：

<img src="https://logo.clearbit.com/absoluteGarbage"
     onError={event => event.target.src=defaultUrl} />

【讨论】：

【解决方案2】：

  <img src={someurl} 
   onError={(e)=>{e.target.onerror = null; e.target.src="image_path_here"}}/>

当图像加载失败时，会调用 onError。用这个函数来做你的逻辑

【讨论】：