¿Hay alguna manera de obtener varias imágenes en el front-end de Angular desde un backend de nodejs?
Actualmente tengo este código que no funciona correctamente. Pero solo devuelve una imagen a la consola. (Tampoco estoy seguro de cómo mostrar esto en la página web) esto también está haciendo una solicitud separada para obtener la imagen. por lo que creo que es una mala práctica
componente
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 // } })archivo de servicio angular
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; }punto final API NODE
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 }) } })Necesito obtener algunas imágenes en una solicitud. Si hay una manera de hacerlo por favor ayuda.
Gracias de antemano
No estoy seguro de poder ayudarte, pero tal vez pueda darte una pista en la dirección correcta. Tengo mis imágenes en un cms sin cabeza (directus) y las obtengo y las muestro a través de REST-Api de la siguiente manera:
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); } }y en el archivo html hay un enlace a imageBlobUrl:
<img class="image" [src]="imageBlobUrl">Para obtener algunas imágenes, puede simplemente llamar al método loadImage varias veces y guardar sus blobs en una matriz.
Espero que esto te sirva de ayuda, aunque no sea la respuesta perfecta a tu pregunta.