Is there a way to get multiple images to the Angular front end from a nodejs backend.
currently i have this code which is not working properly. But it is only returning one image to the console. (I am not sure how to show this in the webpage either) this is also doing a seperate request to get the image. so it think it is bad practice
component
this.vehicleService.getAdvertImage(this.image).subscribe( data => {
console.log(data);
const imageURL = URL.createObjectURL(data);
this.ADImage = imageURL;
// let reader = new FileReader();
// reader.onload = (data: any) => {
// this.ADImage = data
// }
})
Angular service file
getAdvertImage(image: any): Observable<any>{
let params = new HttpParams();
params = params.append('image', image)
const reqURL = `${this.vehicleURL}/get-ad-image`;
const getImage = this.http.get<any>(reqURL, { params: params } )
return getImage;
}
NODE api endpoint
router.get('/get-ad-image?:image', async (req, res) => {
const imageURL = req.query.image
try {
res.download(imageURL)
} catch (error) {
res.status(404).json({ error })
}
})
I need to get few images in one request. If there is a way to do that please help.
Thank you in advance
I'm not sure if I can help you, but maybe I can give you a hint into the right direction. I have my images in a headless-cms (directus) and get & display them via REST-Api the following way:
loadImage(ImageUrl) {
if(imageID!=null){
this._directusService.getImgAsBlob(ImageUrl).subscribe(res=>{
this.createImageFromBlob(res);
})
}
}
getImgAsBlob(ImageUrl) {
const httpOptions = {
responseType:'blob' as 'json'
};
return this._http.get<Blob>(ImageUrl, httpOptions);
}
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageBlobUrl = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
and in the html-file there is a binding to imageBlobUrl:
<img class="image" [src]="imageBlobUrl">
To get a few images you can just call loadImage-method a few times and save your Blobs into an array.
I hope that this is a little help for you, even though it is not the perfect answer to your question.