Question

我正在通过api调用来接收图像，并且某些调用没有实际图像，因此我相信我得到的这些null值正在引起反应以引发错误。我尝试在代码中使用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

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

1 个答案: