title: Image onError Handling in React
body: <p>I am trying to grab the <code>maxresdefault</code> of multiple YouTube thumbnails. Some YouTube videos simply don't have a high res thumbnail photo so I want to catch that with an onError prop on an img element. For some reason my function is not triggering when I get the 404 img error. Any ideas? Thanks in advance.</p>
  
  <pre><code>class FeaturedVideo extends Component&lt;Props&gt; {
    addDefaultSrc = (e) =&gt; {
      e.target.src = this.props.background.replace("maxresdefault", "hqdefault")
    }
  
    renderVideo = (props) =&gt; (
      &lt;div
        style={{
          width: "100%",
          height: "100%",
          backgroundSize: "contain",
        }}
        className="featured-community-video"
      &gt;
        &lt;img onError={this.addDefaultSrc} src={props.background} alt="" /&gt;
        &lt;div className="featured-community-video-title"&gt;
          &lt;h2 style={{ fontSize: "0.8em" }}&gt;WATCH&lt;/h2&gt;
          &lt;h1 style={{ fontSize: props.titleFontSize }}&gt;{props.title}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  
    render() {
      return (
        &lt;div
          key={this.props.postId}
          style={{
            width: this.props.width,
            height: "50%",
          }}
          className="featured-community-video-container"
        &gt;
          &lt;Link to={routeCodes.POST_DETAILS(this.props.postId)}&gt;
            {this.renderVideo(this.props)}
          &lt;/Link&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>