I can't find a simple solution how to display an image on my website. I can read it in my node js backend but it will download the file instead of placing in my img tag.
Do you have a simple solution for that? Thank you very much!
HTML
let cell6 = document.createElement("td");
cell6.innerHTML = `<img src={http://localhost:4001/getImage/pexels-cottonbro-4065175.jpg}></img>`;
NODE 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);
}
);
};
The problem you face here is not how you read the data, it's how you send the data to Frontend.
First of all, you need to set the headers properly that the frontend (receiver) understands that it's an image and doesn't download that but to show it.
Modified your code here:
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);
}
);
};