0

Necesito mostrar la imagenes que estan guardads en Nodejs/express desde Angular. En Nodejs/express las imagenes estan guardadas en una carpeta uploads y en la base de datos Postgresql cada registro de libro tiene la ruta de su imagen correspondiente: introducir la descripción de la imagen aquí

Desde Angular tengo un servicio donde obtiene la lista de todos los libros guardados en la base de datos y al recorrer esa lista con un *ngFor quiero mostrar la imagen de cada libro. Cuando recorro la lista, en book.url_image muestra la ruta asi: uploads\7c76ce1e-9bce-46e1-9fb0-77dc3c0a82e7.jpg obviamente en la etiqueta <img> no muestra nada.

<div *ngFor="let book of bookList$ | async">
    <p>{{book.url_image}}}</p>
    <img [src]="book.url_image">
</div>

Y ahí es donde estoy perdido, porque no se como hacer para mostrar las imagenes.

Aca en Nodejs mi controller.ts para obtener la lista de libros.

export const getBooksWithAuthorName = async (req: Request, res: Response): Promise<Response> => {
    try{
        const response: QueryResult = await pool.query('SELECT books.id_book, books.name, books.url_image, authors.name AS Autor FROM books INNER JOIN authors ON books.id_author = authors.id_author');
        return res.status(200).json(response.rows);
    }
    catch(e){
        console.log(e);
        return res.status(500).json('Internal server error');
    }    
}

Aca la ruta en mi archivo routes.ts

router.get('/booksAuthorName', getBooksWithAuthorName);

En Angular el servicio book.service.ts

 getBooksWithAuthorName() {
    return this.http.get<Book[]('http://localhost:4000/booksAuthorName');
  }

mi component.ts implementando el servicio

bookList$: Observable<Book[]>;
  
constructor(public bookService: BookService) { }

ngOnInit(): void {
  this.bookList$ = this.bookService.getBooksWithAuthorName();
}

y aca el component.html

<div *ngFor="let book of bookList$ | async">
    <p>{{book.url_image}}</p>
    <img [src]="book.url_image">
</div>

1 respuesta 1

1

Lo solucione de esta forma:

Desde Nodejs:

  1. Cree una carpeta public y adentro de la misma la carpeta uploads
  2. A Multer tuve que indicarle que guarde las imagenes en la carpeta public/uploads.
  3. En mi archivo server.ts declare app.use(express.static('public')); de esta forma puedo ver las imagenes en el servidor escribiendo en el navegador: http://localhost:4000/uploads/cb27f405-1e09-4569-9589-f34be646ae46.jpg

Desde Angular:

  1. En la etiqueta le vinculo una función donde recibe el path de la imagen de la base de datos, donde voy a necesitar hacerle unos cambios. Porque este path por defecto viene de la siguiente forma: public\uploads\cb27f405-1e09-4569-9589-f34be646ae46.jpg y esto trae 2 inconvenientes.
  • uno de ellos es que el path lo muestra con barras invertidas "\" .
  • y el otro inconveniente es el "public" al inicio del path.

Entonces si a mi etiqueta <img> le indico la ruta tal cual esta: http://localhost:4000/public\uploads\cb27f405-1e09-4569-9589-f34be646ae46.jpg no va a mostrar nada.

Aca en mi component.ts la funcion

linkImg(urlImage) {
    // quito la palabra public
    let str = urlImage.replace(/public/g, '');
    // quito la barra '\'
    str = str.replace('\\', '');
    // invierto la barra en sentido a '/'
    str = str.replace('\\', '/');
    // console.log(str);
    const URL = 'http://localhost:4000/';
    const link = URL + str;
    return link;
  }

y en mi component.html

<div *ngFor="let book of bookList$ | async">
    <img [src]="linkImg(book.url_image)">
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.