Javascript React中的镜像错误处理

我正在尝试获取多个YouTube缩略图的

maxresdefault

。一些YouTube视频根本没有高分辨率的缩略图，所以我想用img元素上的OneError道具捕捉到这一点。由于某些原因，当我得到404 img错误时，我的函数没有触发。有什么想法吗？提前谢谢

class FeaturedVideo extends Component<Props> {
  addDefaultSrc = (e) => {
    e.target.src = this.props.background.replace("maxresdefault", "hqdefault")
  }

  renderVideo = (props) => (
    <div
      style={{
        width: "100%",
        height: "100%",
        backgroundSize: "contain",
      }}
      className="featured-community-video"
    >
      <img onError={this.addDefaultSrc} src={props.background} alt="" />
      <div className="featured-community-video-title">
        <h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
        <h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
      </div>
    </div>
  )

  render() {
    return (
      <div
        key={this.props.postId}
        style={{
          width: this.props.width,
          height: "50%",
        }}
        className="featured-community-video-container"
      >
        <Link to={routeCodes.POST_DETAILS(this.props.postId)}>
          {this.renderVideo(this.props)}
        </Link>
      </div>
    )
  }
}

类功能视频扩展组件{
addDefaultSrc=（e）=>{
e、 target.src=this.props.background.replace（“maxresdefault”、“hqdefault”）
}
renderVideo=（道具）=>(
监视
{props.title}
)
render（）{
返回(
{this.renderVideo（this.props）}
)
}
}

要实现这一点，我建议渲染

监视
{props.title}
}
render（）{
返回(
{this.renderVideo（this.props）}
)
}
}

---

希望有帮助

由于某些原因，错误仍然没有触发。我在控制台中得到404错误，但OneError方法没有触发。奇怪-只是为了检查，执行

this.props.background的值

prop匹配开发人员控制台中无法加载的资源url？是的，这是给我带来麻烦的特定url

https://i.ytimg.com/vi/pzRDaVxNCj8/maxresdefault.jpg

。正如您所看到的

https://i.ytimg.com/vi/pzRDaVxNCj8/hqdefault.jpg

工作正常。除了onError方法之外，也许还有另一种方法？我认为它返回一个404和一个默认的空白图像，DOM不认为这是一个错误。这是正确的-只是更新了答案，这有帮助吗？

class FeaturedVideo extends Component<Props> {

  componentDidMount() {

    if(this.props.background) {

      // When component mounts, create an image object and attempt to load background
      fetch(this.props.background).then(response => {
         if(response.ok) {
           // On success, set the background state from background
           // prop
           this.setState({ background : this.props.background })
         } else {        
           // On failure to load, set the "default" background state
           this.setState({ background : this.props.background.replace("maxresdefault", "hqdefault") })
         }
      });
    }
  }

  // Update the function signature to be class method to make state access eaiser
  renderVideo(props) {

    return <div
      style={{
        width: "100%",
        height: "100%",
        backgroundSize: "contain",
      }}
      className="featured-community-video">

      {/* Update image src to come from state */}

      <img src={this.state.background} alt="" />
      <div className="featured-community-video-title">
        <h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
        <h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
      </div>
    </div>
  }

  render() {
    return (
      <div
        key={this.props.postId}
        style={{
          width: this.props.width,
          height: "50%",
        }}
        className="featured-community-video-container"
      >
        <Link to={routeCodes.POST_DETAILS(this.props.postId)}>
          {this.renderVideo(this.props)}
        </Link>
      </div>
    )
  }
}