Angular （8）动态背景图像的Validade图像src

我使用angular实现了动态背景图像。我就是这样做的：

<div [style.height.px]="coverHeight" [style.background-image]="'url(' + coverImage + ')'" class="card mb-3">
</div>

因为当图像无效时，这实际上会在浏览器控制台中生成错误。错误是一个

（未找到）GET

。但是当我尝试

尝试时。。。catch

it，它似乎从不将其视为异常，因此它将始终进入

try

另外，像检查图像宽度这样的尝试也不起作用，我也不知道为什么。另外，我不想使用DOM来实现这一点，这个函数应该非常简单，检查图像，返回true或false

---

这应该很容易，但我现在很难。。。有什么想法吗？

在组件中注入httpClient

import { HttpClient } from '@angular/common/http';
import { catchError, mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';

constructor(private http: HttpClient) {}

覆盖您的url方法：

  url(coverImage: string) {
    const defaultImageUrl =
      'http://mihost.io/default-image';

    return this.http
      .get(coverImage, {
        responseType: 'blob',
      })
      .pipe(
        mergeMap((blob: { size: number; type: string }) => {
          if (blob.type === 'image/png') {
            return of(coverImage);
          } else {
            return of(defaultImageUrl);
          }
        }),
        catchError(error => {
          return of(defaultImageUrl);
        }),
      );
  }

在html中使用异步管道

[style.background-image]="'url(' + coverImage + ')' | async "

---

在

if（blob.type=='image/png'）

中，与其他类型或类型数组进行比较

通过图像，您可以访问类似事件的事件。你可以利用这两个为你的目的。最后，我介绍了一个StackBlitz，但请确保在测试它时，StackBlitz仅适用于

https

URL

所以当用户在输入中输入一些东西时，你调用一个函数，是吗？然后，该函数可以如下所示：

changeBackground（）{
设img=新图像（）；
//imgUrl是包含用户在输入中键入的内容的属性
img.src=this.imgUrl；
img.onload=（）=>{
this.coverImage=img.src；
}
img.onerror=（）=>{
console.log（'失败'）
}
}

---

你看，

url（）

不是一种方法。这只是一种使图像具有动态性的方法。每当变量“coverImage”改变值时，背景图像就会改变。（更改）上有一个函数，用于检查字段值并验证图像是否存在。如果图像确实存在，变量将被更新。如果没有，变量将保持sameI尝试创建的函数与您建议的函数相同。但回报始终是一个无意义的可观测值，以我作为param发送的值为准。

[style.background-image]="'url(' + coverImage + ')' | async "