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 minimal reproducible example. — Quentin
– Quentin, Commented Feb 2, 2022 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
– Quatban Taco, Commented Feb 2, 2022 at 11:00

Larry Bekchyan · Accepted Answer · 2022-02-02 11:11:05Z

4

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

answered Feb 2, 2022 at 11:11

Larry Bekchyan

1687 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to easily display Image from Node JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related