Hola como va? Estoy con problemas a la hora de mostrar la imagen en React JS... Desde Node Js, guardo mi articulo con sus atributos y su imagen en mi base de datos de MySQL (Guardo la ruta de la carpeta en la que se encuentra el archivo que subi con multer). Ahora cuando obtengo los datos de los articulos desde react consumiendo mi API de node js, quiero hacer que me muestre la imagen y no se como hacerlo, me podrian ayudar por favor? Asi esta el modelo en la base de datos de mysql mia:
2 respuestas
para este caso tenemos 2 alternativas,
La primera es que la imagen la almacenes en una carpeta publica de tu aplicación de node:
app.use(express.static('public'));
digamos que tienes una carpeta public y dentro de esta una carpeta images, podrías acceder por esta url:
http://localhost:3000/images/kitten.jpg
Lo otro es que leas la imagen desde node y la codifiques como un base64 y que en front la decodifiques en el front
const fs = require('fs');
const contents = fs.readFileSync('/path/to/file.png', {encoding: 'base64'});
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
-
Genial mucahs gracias, lo pruebo y aviso! Saludos Commented el 16 ago. 2021 a las 22:22
-
Si no tienes una ruta publica para cargar las imágenes y quieres que hagan login para verlas tendrás que crear un endpoint para carga de imágenes, luego con axios en las configuraciones solo tienes que colocar:
const axiosConfig = {
method: "get",
url: "tu-url",
responseType: "blob",
headers: {
Authorization: "token",
},
};
axios(axiosConfig)
y cuando recibes la imagen la conviertes para mostrarla en el src
var miImagen = URL.createObjectURL(res.data)