Question

我的http电话：

return http.get(url).map(res => res.text());

组件：

 httpService.getCustomBanner('path').subscribe(
 data => {
     this.image = 'data:image/jpeg;base64,'+ data
 })

HTML：

<div *ngIf = "image">
    <img [src]="sanitizer.bypassSecurityTrustUrl(image)"/>
</div>

我没有收到任何错误，API正在返回一种图像/ jpeg，但没有什么是渲染。

编辑：取出data:image/jpeg;base64以及dee zg的答案就是修正它的原因。

Answer 1

在你的http电话中，你需要这样的东西（没有经过测试，从头部写作）：

.map(res => res.blob())
.map(blob => URL.createObjectURL(blob))

会返回DomString，您可以将其输入到您的img源代码中。

Answer 2

尝试使用以下

组件中的

定义一个函数

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}

sanity(url)
{
return this.sanitizer.bypassSecurityTrustUrl(url)
}

并在模板中使用

<div *ngIf = "image">
<img [src]="sanity(image)"/>
</div>

Answer 3

嗨我不确定[src]，但您可以使用以下代码并测试它是否适合您

<div *ngIf = "image">
    <img src="{{sanitizer.bypassSecurityTrustUrl(image)}}"/>
</div>

Answer 4

谢谢。我尝试了很多帖子，但这一篇对我有用。对于其他人，我将在这里发表我的经验。为了进行测试，我的asp.net核心API返回了一个带有byte []数据类型图像的学生列表，该列表被映射到Angular中的Blob。另外，在Angular字段中，类中的名称必须以小写开头以供参考，无论其声明如何。例如。

 Student.Photo; // is declared in a Student class. 

 students: Student[];
 //Call an api and put the result into students. 
 students[0].photo worked. But students[0].Photo caused an error of 'undefined'.

有关多个图像的工作示例，请参见以下代码。

-角度组件HTML -----

<tr *ngFor="let item of studentList">
        <td>{{item?.given1}}   --  {{item?.surname}}</td>

        <td>          
            <img [src]="getImangeUrl(item?.photo)"/>
        </td>        
</tr>

-在component.ts文件中

public getImangeUrl(photo:Blob): any {    
    if (photo === null)
      return "";
    else
    {
      let objectURL = 'data:image/jpeg;base64,' + photo;
      return this.sanitizer.bypassSecurityTrustUrl(objectURL);   
    }
  }

最后它对我有用。大多数示例仅适用于单个图像，就像上面的示例一样，很容易做到。编码愉快！

Angular - 从API渲染图像/ jpeg数据

4 个答案: