Question

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

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对象解决了我的问题，这是我的代码：

sertvice 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'));
  }

app component 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

和相同的后端代码

Answer 1

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

Answer 2

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

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

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

角度2：显示使用快速js的二进制图像

2 个答案: