如何輕松地從 Node JS 顯示圖像

Question

我找不到如何在我的網站上顯示圖像的簡單解決方案。 我可以在我的節點 js 后端讀取它，但它會下載文件而不是放在我的 img 標簽中。

你有一個簡單的解決方案嗎？ 非常感謝！

HTML

let cell6 = document.createElement("td");
    cell6.innerHTML = `<img src={http://localhost:4001/getImage/pexels-cottonbro-4065175.jpg}></img>`;

節點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 1

您在這里面臨的問題不是您如何讀取數據，而是您如何將數據發送到前端。

首先，您需要正確設置標題，以便前端（接收器）理解它是圖像並且不下載它而是顯示它。

在此處修改您的代碼：

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