title: Preventing img from loading in angularjs
body: <p>I have a div with an image:</p>
  
  <pre><code>&lt;div ng-if="showIt"&gt;
      &lt;img src="{{filepath}}/{{filename}}"&gt;
      &lt;!-- ... and a bunch other other elements --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The thing is <code>{{filepath}}</code> and <code>{{filename}}</code> will be null if <code>showIt</code> is false.</p>
  
  <p>However, I always see a 404 error in my console because I think Angularjs is rendering the whole DOM, and then removing the bits where <code>ng-if</code> evaluates to false. This means the browser will always request the non-existent images even when <code>showIt</code> is false.</p>
  
  <p>Is there a way prevent the DOM from creating that entire div block, so that the non-existent images will never be requested by the browser?</p>