javascript - 如何修复仅 IE 上的图像损坏问题？

Question

我在 Angular 元素中遇到有关删除损坏图像的问题，我成功删除了 Chrome、Firefox 和 Edge。但它对于 IE(Internet Explorer - 我使用的是版本 11)不起作用。

情况是 logoURL 和 backUpImage 均未响应任何图像。

我为解决此问题所做的工作:

1. 创建 image-default.directive 来处理第一个网址失败时的图像链接
2. 添加alt=""

这是我的代码:

• 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

<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>

这是 IE 11 上的结果

我在寻找什么:

如果主 url 和备用 url 失败，有没有办法通过使用 CSS 来修复它？

Answer 1

你能试试这个代码吗:

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

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

但也许您也可以在 URL 不可用时跳过渲染该图像。