Question

未处理的拒绝（TypeError）：无法读取 null 的属性“img”

2019-07-25

340

reactjs image

我正在进行 api 调用来接收图像，但某些调用没有实际图像，因此我相信我得到的这些 null 值导致 react 抛出错误。我尝试在代码中使用 onError 方法来放置后备图像，但效果不佳。我也尝试过用三元表达式处理此错误，但没有任何效果。我的问题是，在收到 null 的情况下，消除此错误并提供默认图像的最佳方法是什么。

这是我收到错误的代码行：

<img
        className="cover-photo"
        src={this.props.detail.img}
        alt={this.props.detail.caption}
       />

Answer 1

您可以这样检查 this.props.detail 是否为空并设置默认值。这是使用条件（三元）运算符

<img
    className="cover-photo"
    src={this.props.detail ? this.props.detail.img : "/default/img/path.png"}
    alt={this.props.detail ? this.props.detail.caption : ""}
   />

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator