Angular 5-如何在HTML中显示作为http POST输出的图像？

我需要显示来自POST请求的缩略图/图像

邮差以正确的方式显示输出

我尝试在角度分量中使用相同的，但不显示。控制台显示文本/二进制

html

<img src="{{turl}}" />

<h2>Thumbnail imageBlobUrl</h2>
<img [src]="imageBlobUrl">

---

感谢您的帮助？

为了在DOM中显示图像，我们需要将blob转换为base64。这是密码

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

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

另外，通过将safeurl应用于图像src，确保您使用了DomSanitarizer可注入服务。

在帮助下，经过多次往返，找到了解决方案

这里讨论了解决方案：

这里的关键是使用

responseType:'blob'作为'json'

而不是

responseType:'blob'

服务.ts

 turl : any

getThumbnail() : void {
this.azureblobService.getBlobThumbnail()
  .subscribe(
    (val) => {
      console.log("POST call - getThumbnail- successful value returned in body",
        val);
      this.turl = val; //<====== Set value here
    },
    response => {
      console.log("POST call - getThumbnail - in error", response);
    },
    () => {
      console.log("The POST - getThumbnail - observable is now completed.");
    });
 }

getBlobThumbnail(): Observable<Blob> {
  console.log("....AzureblobService.getBlobThumbnail()");
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
});

return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
  {
    "url": "http://xxxx/Logo-1788C.png"
  }, {headers: headers, responseType: 'blob' as 'json' });

getThumbnail() : void {
 this.azureblobService.getBlobThumbnail()
   .subscribe(
      (val) => {
        console.log("POST - getThumbnail- successful value returned in body", val);
        this.createImageFromBlob(val);
    },
    response => {
      console.log("POST - getThumbnail - in error", response);
    },
    () => {
      console.log("POST - getThumbnail - observable is now completed.");
    });
}
/* Convert */
createImageFromBlob(image: Blob) {
 console.log("Call createImageFromBlob()", image);
 let reader = new FileReader();
 reader.addEventListener("load", () => {
  this.imageBlobUrl = reader.result;
 }, false);

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

Component.html

<img src="{{turl}}" />

<h2>Thumbnail imageBlobUrl</h2>
<img [src]="imageBlobUrl">

缩略图图像bloburl

---

环境：Angular 5.0.0

我不熟悉API，但我猜

responseType

是

blob

可能是问题所在。尝试将其更改为

json

maybe？当我尝试在component.ts中添加

createImageFromBlob（val）

时，替换行

this.turl=val，编辑器显示“val”是“类型对象的参数不可分配给Blob类型的参数”。根据上面的屏幕截图，您需要传递val对象的文本属性。