Angular 2：显示使用 express js 提供的二进制图像答案

【问题标题】：Angular 2 : display binary image served with express jsAngular 2：显示使用 express js 提供的二进制图像
【发布时间】：2017-08-13 17:00:52
【问题描述】：

我在服务器中有一张图片，我想将它发送给客户端：这是我的服务器端代码：

var options = {
    root: './Images/',
    dotfiles: 'deny',
    headers: {
        'x-timestamp': Date.now(),
        'x-sent': true
    }
};
var fileName = "a.png";
BillModel.getBillsModel((err, config_model) => {
    if (err) {
        console.log("error from database " + err)
        //res.json({ code: 0, error: err, response: null })
    } else {
        res.sendFile(fileName, options, function (err) {
            if (err) {
                console.log(err);
            } else {
                console.log('Sent:', fileName);
            }
        });
   }

这里是我在客户端的代码：

    this.billsService.getAllModel().subscribe(
      (data) => {
        console.log(data.text());
        this.image = data.text();
      },  
      (err) => console.log(err),
      () => console.log("Done")
    );

html代码：

<img  src="'data:image/jpeg;base64,'+image"/>

所以图像二进制数据在控制台中成功显示但我无法将其添加到html页面

解决方案：感谢 Lyubimov Roman ，我已经使用blob对象解决了我的问题，这是我的代码：

服务 ts：

public getImage() {
    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({
      headers, responseType: ResponseContentType.Blob,
    });
    return this.http.get('http://localhost:3000/BillsModel/all', options)
      .map((res: Response) => { return (res); })
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

应用组件 ts

this.billsService.getAllModel().subscribe(
      (data) => {
        console.log(data._body);
        var blob = new Blob([data.blob()], { type: "image/png" });
        var reader = new FileReader();

        reader.onload = (event) => {
          this.URL = reader.result;
        }
        reader.readAsDataURL(blob);
      },  //changed
      (err) => console.log(err),
      () => console.log("Done")
    );

html代码：

 <img *ngIf="URL" [src]="URL" /> //you need to use *ngIf="URL" , otherwise some browser error could appear

和相同的后端代码

【问题讨论】：

我猜你应该将 responseType 设置为 blob，然后通过 reader 获取数据。查看here 制作blob 和here 接收图像base64 内容。
感谢@LyubimovRoman，已经用 blob 完成了，我希望你把它作为答案发布而不是评论

标签： angular express

【解决方案1】：

您需要将 responseType 设置为 blob，然后通过 reader 获取数据。查看here 制作blob 和here 接收图像base64 内容。

【讨论】：

请包含实际代码而不仅仅是链接...以防将来链接失效

【解决方案2】：

如果您想将通过角度绑定从服务器接收到的 base64 编码图像绑定到 DOM。您需要首先信任该 URL，否则 DomSanitizer 将删除它 (see the docs)。

url = sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + image)

然后你可以使用 url 并绑定它：<img [src]="url">。

【讨论】：