title: Preventing image from rendering in AngularJs
body: <p>I have this jsFiddle:
  <a href="http://jsfiddle.net/HMZuh/1/" rel="nofollow">http://jsfiddle.net/HMZuh/1/</a></p>
  
  <p>Which contains this html</p>
  
  <pre><code>&lt;div ng-app ng:controller="ShowHideController"&gt;
      &lt;div ng-show='showMe'&gt;
          &lt;img ng-src="{{imageSource}}"/&gt;
      &lt;/div&gt;
      &lt;button ng-click='showImage()'&gt; show image &lt;/button&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>and this script:</p>
  
  <pre><code>function ShowHideController($scope) {
      $scope.showMe = false;
  
      $scope.imageSource = '';
  
      $scope.showImage = function(){
          $scope.showMe = true;
          $scope.imageSource = 'https://www.google.com/images/srpr/logo3w.png';
      }
  }
  </code></pre>
  
  <p>I'm getting a 404, image not found when the source has not yet been set, is there any way of preventing this when showMe is false?</p>
  
  <p>​</p>