Ho do we get multiple images from a node backend to an angular frontend-CodePudding

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

CodePudding user response：

You need to use res.zip() with express-zip library, the answer can be found here.

CodePudding user response：

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">

I hope that this is a little help for you, even though it is not the perfect answer to your question.