(Angular 8) 验证动态背景图像的图像 src

Question

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

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

我这样做是因为它是一种调整图像大小而不失真的方法。这工作正常。

但是，在这下面，有一个输入，每次调用(change)函数，我都想让div上的图片更新一下。

所以我有一个默认图像，当我的用户在输入中输入https://s.imgur.com/images/logo-1200-630.jpg?2 之类的内容时，图像将显示在那里。如您所见，这很容易，背景图像是动态的。但我想验证链接是否存在，如果不存在，则默认图像将保留在那里。

所以我尝试了一些方法，例如：

Check if image exists on server using JavaScript?
Checking if image does exists using javascript
see if src of img exists

但它们都没有按我需要的方式为我工作。
我需要的是一个函数，如果图像存在则返回 true。

我遇到了什么问题：

在尝试使用 new XMLHttpRequest(); 时，我收到来自某些域（例如 IMGUR）的 CORS 错误。

当尝试使用 var img = new Image(); 然后捕获 onerror 时，它有点工作，但我仍然无法返回布尔值，因为 onerror 函数没有返回任何有用的东西，我唯一能得到的是alert图片无效时。

尝试<div onerror="doSomething()">也不起作用，函数没有被调用（可能是因为它是div，而不是img标签）。

我得到的最接近的是在使用时

var img = new Image();
img.src = url;

因为当图像无效时，实际上会在浏览器的控制台中生成错误。错误是(not found) GET。但是当我尝试try ... catch它时，它似乎永远不会将其视为异常，所以它总是会进入try。

另外，尝试检查图像宽度等方法也不起作用，我也不知道为什么。另外，我不想为此使用DOM，而且这个功能应该很简单，检查图像，返回true或false。

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

Answer 1

通过图像，您可以访问 onload 和 onError 等事件。您可以将这两个用于您的目的。最后我展示了一个 StackBlitz，但是当你测试它时，请确保 Stackblitz 只适用于https urls。

所以当用户在 input 中输入内容时，你调用了一个函数，是吗？该函数可能如下所示：

changeBackground() {
  let img = new Image();
  // imgUrl is the property containing what user has typed in input
  img.src = this.imgUrl;
  img.onload = () => {
    this.coverImage = img.src;
  }
  img.onerror = () => {
    console.log('failed')
  }
}

StackBlitz

Answer 2

在你的组件中注入 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') 中与其他类型或类型数组进行比较！