How to easily display Image from Node JS

Question

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

I can't see how that code would generate a download. If you assign a value to `src` it will either display it as an image or it will discard the resource as invalid. It won't download it. The cause must be outside the code you shared. You need to provide a [mcve]. — Quentin, Feb 02 '22 at 10:59
Are you able to place the file in a static folder such as public?and serve the folder using express? — Quatban Taco, Feb 02 '22 at 11:00
Do you mean [serve an image](https://stackoverflow.com/questions/5823722/how-to-serve-an-image-using-nodejs?answertab=votes#tab-top) ? — ikhvjs, Feb 02 '22 at 11:01

score 2 · Accepted Answer · answered Feb 02 '22 at 11:11

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

How to easily display Image from Node JS

1 Answers1