显示在Angular 5中作为Blob对象接收的图像 [英] Showing an image that have been received as a Blob object in Angular 5

问题描述

我正在使用MEAN Stack应用程序，我想做的是显示存储在数据库中的图像，因此后端工作正常，但是我真正的问题是前端 Angular 所以我做到了

I'm working on a MEAN Stack app what i want to do is showing an image that's storage in the Data Base so the back-end worked but my real problem is in the front-end Angular so I did this

首先从后端接收图像，我为此提供了服务

First receiving the image from the back end I made a service to do that

// Function to get user's profile image
  getProfileImage(){
      let httpHeaders = new HttpHeaders()
                         .set('authorization', this.authToken);
    return this._http.get(this.domain + '/authentication/getProfileImage',{headers :httpHeaders,
      responseType: "blob"});

  }

以Blob形式接收图片.

That receive the image as Blob.

第二个是在 component.ts 中，我试图将Blob转换为文件

Second is in the component.ts i tried to convert the Blob to a file

imageToShow: any;

getImageFromService() {
      this.authService.getProfileImage().subscribe(data => {
        this.createImageFromBlob(data);
        console.log(data);
      }, error => {
        console.log(error);
      });
}

这是使用 console.log(data);

这就是我得到的

Blob(763750) {size: 763750, type: "text/xml"}

并且它的大小与数据库中的文件长度相同，因此可以正常工作.

and the size of it is the same file length in the Data Base so it worked to.

现在是将Blob转换为图像的第二种方法

Now the second method that convert the Blob to an image

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

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

和 console.log(this.imageToShow); 显示的是这个 data:text/xml; base64，/9j/4RE6RXhpZgAATU0A 很长的 string 是 base64 ，所以我在 if 中添加了 console.log(image); ，显示的是

and with console.log(this.imageToShow); what it's showing is this data:text/xml;base64,/9j/4RE6RXhpZgAATU0A a very long string that's a base64 , so i add a console.log(image); in the if and what show me is this

Blob(763750) {size: 763750, type: "text/xml"}

因此它并没有执行任何操作，并且在HTML中

so it didn't do a thing and in the HTML

<img [src]="imageToShow " alt="" class="img">

那怎么了

推荐答案

首先尝试将img标签绑定到将成为图片网址的变量.例如

First try to bind img tag to a variable that will be the url of your picture. For example

<img [src]=imageUrl>

然后您需要使用DomSanitizer

Then you need to use DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer:DomSanitizer)

绕过您的unsafeUrl的SecurityTrust并在您检索图像时在组件中为该图像创建一个url，如

to bypassSecurityTrust of your unsafeUrl and in your component when you retrieve the image you should create an url for the image like this

getImageFromService() {
    this.authService.getProfileImage().subscribe(data => {
        unsafeImageUrl = URL.createObjectURL(data);
        imageUrl = this.sanitizer.bypassSecurityTrustUrl(unsafeImageUrl);
    }, error => {
        console.log(error);
    });
}

这将为您的图片创建一个临时网址，您可以在绑定中使用

This will create a temporary url of your image which you can use in your binding

这篇关于显示在Angular 5中作为Blob对象接收的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！