How to fix issue broken image on IE only?

Question

I am facing issue on Angular project about remove broken image and I removed successfully for Chrome,Firefox, and Edge. But it is not working for IE (Internet Explorer - I am using version 11).

The scenario is that both logoURL and backUpImage reponse no image.

What I have did to fix this issue:

create image-default.directive to handle image link in case of first url is failed
add alt=""

Here is my code:

image-default.directive.ts

import { Directive, Input, HostBinding } from '@angular/core';
@Directive({
    selector: 'img[default]',
    host: {
        '(error)': 'updateUrl()',
        '(load)': 'load()',
        '[src]': 'src'
    }
})

export class ImagePreloadDirective {
    @Input() src: string;
    @Input() default: string;
    @Input() class: string = 'agent-img';
    @HostBinding('class') className

    updateUrl() {
        this.src = this.default;
    }
    load() {
        this.className = this.class;
    }
}

HTML applied

<li *ngIf="logoURL" class="logo">
    <a 
        href="{{companyWebsite}}" 
        target="_blank" 
        queryParamsHandling="merge" 
        routerLinkActive="active" 
        [routerLinkActiveOptions]="{exact :true}">
        <img src="{{logoURL}}" width="150" default="{{backUpImage}}" alt="">
    </a>
</li>

Here is result on IE 11

broken image on IE 11

What I am looking for:

Is there any way to fix it by using CSS in case of main url and backup url is failed?

Does this answer your question? [Inputting a default image in case the src attribute of an html is not valid?](https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali) — Richard, Jan 23 '20 at 05:23
@Richard It is not the answer I want. I apply default image already. But, the problem is sometimes default image also not found. then I set `alt` for the image to set it empty. But this way is not working on IE. — Hoang Subin, Jan 23 '20 at 05:45
Ah I see. You set the `alt` to an empty string because you want the `img` to *not show up at all* when both URL resources fail? — Richard, Jan 23 '20 at 05:55
I will get back to you when I have a solution. In the meantime, please change your title to **directly** and **specifically** mention what you want to achieve. Also, try to reclarify your question in your original post so others can clearly understand what you want. — Richard, Jan 23 '20 at 07:42
Does my answer below (https://stackoverflow.com/a/59890776/9060223) solve your problem? — Richard, Jan 30 '20 at 07:36
I read the code and it looks okay. I will vote if this help me. Thanks a lot @Richard — Hoang Subin, Jan 30 '20 at 08:34

score 1 · Answer 1 · answered Jan 23 '20 at 04:40

1

Can you please try this code:

<img src="" onerror="myFunc(event)" />

<script>
 function myFunc(event) {
   event.target.style.display = 'none';
 }
</script>

But maybe you can also skip rendering that image when its URL is not available.

answered Jan 23 '20 at 04:40

Kawaljit Singh

190
1
6

I uses onerror to load backup image already. I need solution when backup image also not found. – Hoang Subin Jan 23 '20 at 05:42
I think you should try to check if both logoURL and backUpImage are not empty. If both of these are empty then don't render image at all. – Kawaljit Singh Jan 23 '20 at 05:48
In the code above I checked already by apply onerror and alt. It works well on Chrome, Firefox, Edge. Failed on IE 11. Solution for IE is the my purpose of this question. – Hoang Subin Jan 23 '20 at 05:53

Richard · Answer 2 · 2020-01-24T05:39:43.697

I believe that this is what you want. Set the img source to a fallback URL first, if that fails, don't display the img at all. Run the code and see how it detects that the image resources are not available. You will also notice (at least in Firefox) that on the left-side corner of your browser, it will display Looking up non, then Looked up non, then Looking up non1, then Looked up non1. Eventually, it hides the img element because all the resources are not available.

let img = document.querySelector('img')
img.onerror = e => {
  let fallbackURL = img.dataset.fallback
  if (img.src !== fallbackURL) {
    console.log(img.src, fallbackURL)
    img.src = fallbackURL
  }
  else if (img.src === fallbackURL) {
    console.error('No image found, setting image to not display')
    img.onerror = null
    img.style.display = 'none'
  }
}

img {
  display: block;
  width: 100px;
  height: 100px;
  vertical-align: center;
}

<img src = "https://non/" data-fallback = "https://non1/" alt = "Image placeholder">

P.S.: Don't use alt like you did. Please read when you should use alt here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

How to fix issue broken image on IE only?

2 Answers2