How to easily display Image from Node JS

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

Answer

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