在React中以编程方式检查img src

Question

我在一个表格中的页面上有很多客户徽标。一个表格单元格试图获得这样的徽标：

getLogo

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

deal.CompanyWebsite

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

如果对img源的请求失败，并带有以下URL： https://logo.clearbit.com/absoluteGarbage，我可以在React中以某种方式检查一下并回退到默认徽标吗？

我是否必须尝试为每个徽标 的src URL尝试GET请求，然后才能尝试分配img的{​​{1}}属性？如果是这样，这将使图像请求的数量增加一倍，这对于较大的页面结果集将很不利。

Answer 1

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

当图像加载失败时，将调用onError。使用此功能可以做到逻辑

Answer 2

使用onError属性：

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

JSFiddle：https://jsfiddle.net/g1wubsLm/1/