0

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: introducir la descripción de la imagen aquí

Y asi esta el codigo: introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1
  • 1
    favor ingresa tu código como texto, gracias.
    – rpaillao
    Commented el 16 ago. 2021 a las 19:04

2 respuestas 2

1

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'));

más info

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>
2
  • Genial mucahs gracias, lo pruebo y aviso! Saludos
    – Alejo Moya
    Commented el 16 ago. 2021 a las 22:22
  • anduvo, muchas gracias !!
    – Alejo Moya
    Commented el 17 ago. 2021 a las 18:45
1

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)

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.