javascript - How to easily display Image from Node JS - Stack Overflow

admin管理员组

文章数量:1025457

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

• javascript
• html
• node.js
• image

Share Improve this question Follow asked Feb 2, 2022 at 10:50 jansemraujansemrau 25111 gold badge33 silver badges1515 bronze badges 5

• 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 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 Commented Feb 2, 2022 at 11:00
• 1 Do you mean serve an image ? – ikhvjs Commented Feb 2, 2022 at 11:01
• @ikhvjs , that should help. – Quatban Taco Commented Feb 2, 2022 at 11:02
• express.static works for me. Thank you very much! – jansemrau Commented Feb 2, 2022 at 11:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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);
        }
    );
};

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

• javascript
• html
• node.js
• image

Share Improve this question Follow asked Feb 2, 2022 at 10:50 jansemraujansemrau 25111 gold badge33 silver badges1515 bronze badges 5

• 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 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 Commented Feb 2, 2022 at 11:00
• 1 Do you mean serve an image ? – ikhvjs Commented Feb 2, 2022 at 11:01
• @ikhvjs , that should help. – Quatban Taco Commented Feb 2, 2022 at 11:02
• express.static works for me. Thank you very much! – jansemrau Commented Feb 2, 2022 at 11:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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);
        }
    );
};

本文标签： javascriptHow to easily display Image from Node JSStack Overflow