Angular - 如果服务器上不存在图像，则使用默认图像答案

【问题标题】：Angular - Use a default image if image does not exist on serverAngular - 如果服务器上不存在图像，则使用默认图像
【发布时间】：2022-01-08 05:41:45
【问题描述】：

我有一个可以显示封面图片的组件。用户可以上传封面图片，组件将显示用户上传的图片。如果用户不上传图片，那么我想显示默认图片。

如果没有用户上传的图片，我想返回一个错误并调用 changeSource(event)，理论上它应该将一个新的图片 url 绑定到 img src。但是，我没有为 event.target.src 定义，我看到默认图像应该是一个空白区域。显示自定义图像时效果很好。

component.html

<div *ngFor="let coverPhoto of coverPhotos">
    <img src="{{coverPhoto}}"
         (error) ="changeSource($event)" />
</div>

组件.ts

this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
            this.coverPhotos = result;
        }, error => {
                this.errors = error;
                this.changeSource(event);
           }, () => {
        }
        );

changeSource(event) {      
        event.target.src = "https://imageurl";
    }

【问题讨论】：

这能回答你的问题吗？ Angular 2 - Check if image url is valid or broken
谢谢。我已经浏览了这个页面并创建了一个指令，但也没有解决问题。不过会再看一遍。
不知道是不是绑定问题 - 试试<img [src]="coverPhoto" (error) ="changeSource($event)" />
认为它可能是并尝试过，但它会引发错误。感谢您的建议。

标签： javascript html angular image rxjs

【解决方案1】：

直接使用（其中defaultImage是ts文件中的一个变量，保存着默认的图片路径）-

(error)="$event.target.src = defaultImage"

你的 HTML -

<div *ngFor="let coverPhoto of coverPhotos">
  <img src="{{ coverPhoto }}" (error)="$event.target.src = defaultImage" />
</div>

Working example here.

你在ts中从这段代码中传递事件，这显然是未定义的，你不需要从这里调用这个函数-

this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
            this.coverPhotos = result;
        }, error => {
                this.errors = error;
                this.changeSource(event);
           }, () => {
        }
        );

【讨论】：

我认为在 Angular 应用程序中以这种方式直接操作 DOM 几乎总是一个坏主意。最好换掉 src 中的绑定，而不是让 src 与 Angular 认为它绑定的内容不同步。
感谢关于删除 changeSource() 函数的建议，但它仍然无法使用 (error)="$event.target.src = defaultImage"。我会继续挖掘它并希望发布解决方案。

【解决方案2】：

*ngFor 把它扔掉了。删除它似乎可以解决问题。不太清楚为什么会在我发现原因后发布编辑。

<div>
    <img src="{{coverPhotos}}"
         (error)="$event.target.src = defaultImage" />
</div>

【讨论】：

这可能意味着coverPhotos 不是一个数组。 ngFor 用于循环遍历一组项目。