Q:

How should I not load the images with broken link?

I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link. 

HTML : 
<div class="image-result" *ngIf="Display('images')">
    <div class="col-sm-3" *ngFor="let item of items$|async">
      <a href="{{item.link}}">
          <figure>
             <img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
          </figure>       
      </a>
    </div>
</div>

I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)

A:

Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.

If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);

Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"

You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });

References: parentNode, removeChild, addEventListener.

If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.

