title: How do I change the source of an image if an error occurs?
body: <p>Why does the following statement throw an error?</p>
  
  <p><strong>Idea:</strong> To show an image from the normal URL. If it's not found (404), show a fallback image. </p>
  
  <p><strong>Work Done:</strong></p>
  
  <pre><code>&lt;img [src]='image_path + item.leafname' (error) ="[src] = 'fallback_path + item.leafname'" height="200px" class="card-img-top"&gt;
  </code></pre>
  
  <p><strong>Error thrown:</strong></p>
  
  <pre><code>Parser Error: Unexpected token '=' at column 7 in [[src] = 'image_path + item.leafname'] in ng:///AppModule/DashboardComponent.html@46:60
  </code></pre>
  
  <p><strong>Other Answers:</strong>
  I found alternative answers on Stack, which suggests using <code>ng-src</code> for the usual image and <code>onerror = "this.src='url'"</code> for a fallback image. But, how do I do the same using the [src] binding and (error) event binding?</p>