title: Show Image Element only if image exists in Angular
body: <p>I have two sibling elements. One is image and other is a div. I want to show image element if image exists and show div element if image doesn't exist. My elements looks like</p>
  
  <pre><code> &lt;img ng-show="product.img" ng-src="{{product.img}}" /&gt;
   &lt;div class="left margin-right-1 line-height-15" ng-hide="product.img"&gt;{{product.img}}&lt;/div&gt;
  </code></pre>
  
  <p>And <code>product.img</code> results in something like <code>/assets/images/prod.jpg</code>. As this is a string so <code>ng-show</code> will always be true and image tag will be shown. So if image doesn't exist it will show as broken image. So basically what I want is if image doesn't exist, image tag hides and div is shown and vice versa. </p>
  
  <p>I have tried a javascript function like</p>
  
  <pre><code> $scope.imageExists = function(src) {
    var image = new Image();
    image.src = src;
    if (image.width == 0) {
        return false;
    } else {
        return true;
    }
  }
  </code></pre>
  
  <p>And changed my image tag like </p>
  
  <pre><code> &lt;img ng-show="product.img" ng-src="{{imageExists(product.img)}}" /&gt;
  </code></pre>
  
  <p>But this is very expensive. I have 100 products per page and when it loops through all images, the page becomes very very slow. </p>
  
  <p>So can any body guide me what is the best way in angular to show and hide image element if image exists or not.</p>