No puedo encontrar una solución simple sobre cómo mostrar una imagen en mi sitio web. Puedo leerlo en el backend de mi nodo js, pero descargará el archivo en lugar de colocarlo en mi etiqueta img.
¿Tienes una solución simple para eso? ¡Muchos gracias!
HTML
let cell6 = document.createElement("td"); cell6.innerHTML = `<img src={http://localhost:4001/getImage/pexels-cottonbro-4065175.jpg}></img>`;NODO JS
const fs = require("fs"); require("dotenv").config(); module.exports = (req, res) => { fs.readFile( `../backend/images/${req.params.id}`, function (err, image) { if (err) { throw err; } console.log(image); res.send(image); } ); };El problema que enfrenta aquí no es cómo lee los datos, es cómo envía los datos a Frontend.
En primer lugar, debe configurar los encabezados correctamente para que la interfaz (receptor) entienda que es una imagen y no la descargue sino para mostrarla.
Modificó su código aquí:
const fs = require("fs"); require("dotenv").config(); module.exports = (req, res) => { fs.readFile( `../backend/images/${req.params.id}`, function (err, image) { if (err) { throw err; } console.log(image); res.setHeader('Content-Type', 'image/jpg'); res.setHeader('Content-Length', ''); // Image size here res.setHeader('Access-Control-Allow-Origin', '*'); // If needs to be public res.send(image); } ); };