In my component.ts file, I am looking to retrieve images from the backend/images folder as Image objects. The paths of these images are stored in the database.
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;
});
I have attempted to fetch the images using an http request.
for (let i = 0; i < this.editImagePaths.length; i++) {
this.http.get<File>(this.editImagePaths[i]).subscribe(value => {
this.images.push(value);
});
}
The 'images' array consists of files. The issue arises when http.get returns a blob string and core.js displays the following error;
core.js:6014 ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:3000/images/asd0-1575503057766.png", ok: false, …} error: {error: SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse () at XMLHtt…, text: "�PNG ↵↵ IHDRI ������PLTE�F���+*)…�LЙ�3 @��I�؈�ݝ�y�(pIEND�B`�"} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} message: "Http failure during parsing for http://localhost:3000/images/asd0-1575503057766.png" name: "HttpErrorResponse" ok: false status: 200 statusText: "OK" url: "http://localhost:3000/images/asd0-1575503057766.png" proto: HttpResponseBase