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

0

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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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