title: AngularJS ng-src condition if Not Found (via url)
body: <p>I am porting a bunch of images that I stored locally to an online resource that stays up to date. Originally when I stored the images locally I could use the following condition for my images.</p>
  
  <pre><code>&lt;img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png"
  </code></pre>
  
  <p>This would grab the current image pathway based off a name, and if it did not exist it would simply return the image path of <code>/Content/champions/None.png</code></p>
  
  <p>I figured this would work the same way via a url. So I made the syntax.</p>
  
  <pre><code>&lt;img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
  || 
  '/Content/champions/None'}}.png"
  </code></pre>
  
  <p>What I assumed would occur, is that if the above URL returned <code>404 (Not Found)</code>, it would default back to my local storage for the None image. However, it still tries to display an online image and shows the "broken image/picture" icon rather than conditioning over the to my local "None" image.</p>
  
  <p>How might I fix this? Or why is Angular not responding correctly to this scenario when it is saying Not Found <code>404 (Not Found)</code>?</p>
  
  <p>Sometimes it tries to add the conditioned syntax to the URL rather than re-looking in the home directory, could that be the problem? i.e. It sometimes returns the following rather than restarting from my Content folder. <code>http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png</code></p>