如何在MEAN stack应用程序的组件Ts中从后端获取图像

Question

我需要从backend/images文件夹中获取图像作为组件中的图像对象。ts文件。我可以从数据库中获取图像的路径。

this.productsService.getProduct(this.editId).subscribe(productData => {
    this.name = productData.name;
    this.code = productData.code;
    this.category = productData.category;
    this.description = productData.description;
    this.details = productData.details;
    this.editImagePaths = productData.imagePaths;
  });

我尝试通过http请求获取图像。

for (let i = 0; i < this.editImagePaths.length; i++) {


      this.http.get<File>(this.editImagePaths[i]).subscribe(value => {

        this.images.push(value);
      });
    }

图像是文件类型的数组。问题是http.get返回blob字符串，core.js给出以下错误；

果心js:6014错误HttpErrorResponse{headers:HttpHeaders，状态：200，状态文本：“OK”，url:http://localhost:3000/images/asd0-1575503057766.png“，确定：错误，…}错误：{错误：语法错误：意外标记� 在JSON中，JSON的位置0处。在XMLHtt处解析（），文本：“�巴布亚新几内亚↵↵ IHDR  I������PLTE�F��� *)…�LЙ�3 @��我�؈�ݝ�Y�(完)�B`�“}headers:HttpHeaders{normalizedNames:Map（0），lazyUpdate:null，lazyInit:ƒ}消息：“在对http://localhost:3000/images/asd0-1575503057766.png“名称：“HttpErrorResponse”确定：错误状态：200状态文本：“确定”url:http://localhost:3000/images/asd0-1575503057766.png“proto:HttpResponseBase

Answer 1

尝试更改响应类型为'blob'

this.httpClient.get(imageList, { responseType: 'blob' }).subscribe(value => {
   this.images.push(value);
});

Answer 2

首先，它取决于在数据库中以blob或URL/路径的形式存储图像的方式。但是，我建议在将图像上载到服务器上的文件夹时存储图像的路径。

现在，如果需要一个路径，只需使用正常的get请求或post请求获取服务器上映像的路径即可。

export class ComponentName{

products: any;

constructor(
 private service: ServiceComponent
){}

this.service.productList(values).subscribe(data => {
  this.product = data;
})

}

另外，如果你注意到我如何使用一个变量来存储所有的数据；类别，图像和其他。现在如果我想显示我的图像，我会这样做在我的component.html

<img *ngFor="let images of product.imagePaths" [src]="images">

总之，检查您如何存储数据以及如何发回数据。这很重要。我的模式只存储图像路径，即使是在一个数组中，并以json数组的形式检索图像。。。。。

Answer 3

您需要将响应解析为blob，而不是json

this.http.get<File>(this.editImagePaths[i], {responseType: 'blob'})
    .subscribe(value => this.images.push(value));