title: How to prevent infinite loops when setting an image source via onError in React?
body: <p>Scenario: Let's say that I have a <code>&lt;img/&gt;</code> whose <code>src</code> is generated dynamically based on some value like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>    &lt;img className="icon" src={"./" + this.props.name + ".png"} alt="icon" /&gt;
  </code></pre>
  
  <p>I want to avoid a broken image so I change the src on error like so:</p>
  
  <pre><code>&lt;img
      className="icon"
      src={"./" + this.props.name + ".png"}
      alt="icon"
      onError={
          (event) =&gt; {
              console.log(this.props.name + ".png missing from public folder");
              event.currentTarget.src = "./unknown.png";
              event.currentTarget.onerror = null;
          }
      }
  /&gt;
  </code></pre>
  
  <p>This works <em>as long as</em> the image alternative I give actually exists. If it doesn't, it will end up in an infinite <code>onError</code> loop despite me adding the <code>event.currentTarget.onerror = null;</code></p>
  
  <p>How should I go about preventing this? Is it possible?</p>
  
  <p>P.S.: I found alternatives, for example <a href="https://www.npmjs.com/package/react-image" rel="nofollow noreferrer">react-image</a> but I was wondering if there's a native solution. I could also directly edit the DOM with jQuery, but I would rather not mix react with jQuery.</p>