Question

我从API获取大量图像URL并将其显示在角度2 Web应用程序中。一些URL被破坏，我想用我本地存储在我的网络服务器上的默认图片替换它们。有没有人建议如何测试网址？在状态代码404的情况下，替换损坏的图像？

谢谢！

Answer 1

收听图片元素的error事件：

<img [src]="someUrl" (error)="updateUrl($event)">

其中updateUrl(event) { ... }为this.someUrl分配新值。

Plunker example

如果您只想签入代码，可以使用Checking if image does exists using javascript

中说明的方法

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
   }
})
class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

Directive Plunker example

Answer 2

您可以通过这种方式使用 onError 事件来处理 invalid url 或 broken url 。

https://nghttp2.org/documentation/nghttp2_submit_ping.html

<img [src]="invalidPath" onError="this.src='images/angular.png'"/>

这样你可以直接用onError事件将img路径分配给src

Answer 3

我在角4的例子

<img [src]="img" (error)="img.src = errorImg" #img>

其中img - 图像路径;
错误 - 错误发送
errorImg - 默认路径img
#img - 链接到img对象

Answer 4

我找到了一个非常简单的解决方案，对我有用。这不会检查404，但我有可能具有.image属性的对象。我知道这不是他的问题的答案，但希望它能帮助那些人。

8,000x

Answer 5

我使用base64加载微调器：

if node not in targets:

Answer 6

这是我在多张图片上回退的解决方案。我们在解析图像后基本上分离了ChangeDetector，这样我们就可以在解析图像后减少vm检查周期的CPU。

import {Component, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/core';
import {AppStore} from "angular2-redux-util/dist/index";



@Component({
    selector: 'logoCompany',
    changeDetection: ChangeDetectionStrategy.Default,
    template: `
            <div style="padding-top: 7px" > 
              <span style="color: gainsboro; font-family: Roboto">{{getBusinessInfo('companyName')}}</span>
              <!--<img style="width: 35px" class="img-circle" src="http://galaxy.example.me/Resources/Resellers/{{getBusinessInfo('businessId')}}/{{getBusinessInfo('fileName')}}" />-->
              <img style="width: 35px" class="img-circle" [src]="getImageUrl()" (load)="onImageLoaded()" (error)="onImageError()" />
            </div>
    `
})

export class LogoCompany {

    constructor(private cdr:ChangeDetectorRef) {    
    }
    private imageRetries:number = 0;
    private unsub;


    private detach() {
        this.cdr.detach();
    }

    private getImageUrl() {          
        var url = '';
        switch (this.imageRetries){
            case 0: {
                url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.jpg'
                break;
            }
            case 1: {
                url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.png'
                break;
            }
            default: {
                url = 'assets/person.png'
                break;
            }

        }
        return url;
    }

    private onImageLoaded() {
        this.detach();
    }

    private onImageError() {
        this.imageRetries++;
    }

    private getBusinessInfo(field):string {
          return '12345';
    }





}

Answer 7

完美的Angular 8指令：

import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';

@Directive({
    selector: '[appImage]'
})
export class ImageDirective implements AfterViewInit {

    @Input() src;

    constructor(private imageRef: ElementRef) {
    }

    ngAfterViewInit(): void {
        const img = new Image();
        img.onload = () => {
            this.setImage(this.src);
        };

        img.onerror = () => {
            // Set a placeholder image 
            this.setImage('assets/placeholder.png');
        };

        img.src = this.src;
    }

    private setImage(src: string) {
        this.imageRef.nativeElement.setAttribute('src', src);
    }
}

现在，HTML将是：

<img [src]="'/some/valid-image.png'" appImage>

Answer 8

如果要更改未加载的图像或源已损坏... Angular 8，只需更改默认资产的此目标的src：

组件HTML

<... [src] =“ person.pictureUrl”（错误）=“ pictNotLoading（$ event）”>
组件TS

pictNotLoading（事件）{ event.target.src ='assets / nopicture.png'; }

Answer 9

对于此用例，您可以简单地使用三元运算符。我假设您正在从远程服务器获取响应

<img src="{{ res.image ? res.image : onErrorFunction() }}"

如果您不想让服务器提供图像，请在路径中用单引号''。

如果链接断开，则链接将转到onErrorFunction，如果未断开，将加载res.image。

Angular 2 - 检查图像URL是有效还是损坏

9 个答案: