Question

我想在img标签中显示图片：我这样做是

组件

this.file.url=this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.file.url));

模板

<img [src]="file.url">

我收到此错误

ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Answer 1

您应该在GET-Request设置中设置responseType: ResponseContentType.Blob，因为这样您就可以将图像作为blob获取并在以后转换为base64编码的源。你上面的代码不好。如果您想要正确执行此操作，请创建单独的服务以从API获取图像。因为在组件中调用HTTP-Request是不错的。

以下是一个工作示例：

创建image.service.ts并输入以下代码：

    getImage(imageUrl: string): Observable<File> {
        return this.http
            .get(imageUrl, { responseType: ResponseContentType.Blob })
            .map((res: Response) => res.blob());
    }

现在您需要在image.component.ts中创建一些功能来获取图像并以html格式显示。

要从Blob创建图片，您需要使用JavaScript FileReader。这是创建新FileReader并听取FileReader的load-Event的函数。结果，此函数返回base64编码的图像，您可以在img src-attribute：

中使用它

imageToShow: any;

createImageFromBlob(image: Blob) {
       let reader = new FileReader();
       reader.addEventListener("load", () => {
          this.imageToShow = reader.result;
       }, false);

       if (image) {
          reader.readAsDataURL(image);
       }
}

如果您有多个图像，则可以将imageToShow[] = []定义为数组。现在您可以简单地将reader.result推送到此数组。例如：this.imageToShow.push(reader.result)。在模板中，您可以使用*ngFor="let image of imageToShow;"迭代并输出此数组。

现在您应该使用创建的ImageService从api获取图像。您应该订阅数据并将此数据提供给createImageFromBlob - 函数。这是一个示例函数：

getImageFromService() {
      this.isImageLoading = true;
      this.imageService.getImage(yourImageUrl).subscribe(data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      }, error => {
        this.isImageLoading = false;
        console.log(error);
      });
}

现在，您可以在HTML模板中使用imageToShow - 变量，如下所示：

<img [src]="imageToShow"
     alt="Place image title"
     *ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
     <img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

我希望这个描述清楚易懂，您可以在项目中使用它。

Answer 2

这是我在网上找到的一个有用的管道，它可以帮助你完成你想要做的事情。

import {Pipe} from '@angular/core';
import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, 
SafeResourceUrl} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe {

  constructor(protected _sanitizer: DomSanitizer) {

  }

  public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }
}

因此，如果您遇到某种类型的不安全错误，请尝试管道

<iframe [src]="embedUrl | safe: 'resourceUrl'"  frameborder="0" allowfullscreen></iframe>

如果它不是resourceUrl，请尝试使用url或管道中的任何其他选项。这会解决您的问题吗？

Angular4显示来自服务器的图像

2 个答案: