React中如何检测image_url为空时返回备用图片资源地址？

方法1：修改现有getImage工具方法，内置空值校验 #

直接在工具方法内部做参数有效性判断，空值直接返回备用地址，原有渲染代码不需要改动：

getImage = (imageUrl) => {
  // 校验传入的地址是否为 undefined、空字符串等无效值
  if (!imageUrl || imageUrl.trim() === '') {
    // 替换为你自己的备用占位图地址
    return '/assets/default-placeholder.png'
  }
  // 保留原有的getImage逻辑，比如拼接CDN前缀、处理图片裁剪参数等
  return imageUrl
}

方法2：使用img标签onError事件兜底 #

该方案不仅能处理空url的场景，还能覆盖地址有效但图片加载失败（比如资源被删除、跨域限制）的异常情况，稳定性更高：

<div className="someClass">
  <img 
    src={this.getImage(item.image_url)}
    onError={(e) => {
      // 先置空onError，避免备用图也加载失败时触发死循环
      e.target.onError = null
      e.target.src = '/assets/default-placeholder.png'
    }}
    alt="内容展示图"
  />
</div>

方法3：JSX内直接做空值 fallback #

如果不想改动getImage方法，也可以在渲染时直接做短路判断：

<div className="someClass">
  <img src={this.getImage(item.image_url) || '/assets/default-placeholder.png'}/>
</div>

注意：该方案仅能处理getImage返回空值的情况，无法覆盖图片资源加载失败的异常，建议和onError方案配合使用。

内容的提问来源于stack exchange，提问作者Andrew Chu