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