如何轻松显示来自 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

你在这里面临的问题不是你如何读取数据，而是你如何将数据发送到前端。

首先，您需要正确设置 headers 以便前端（接收方）理解它是一个图像并且不下载它而是显示它。

在此处修改了您的代码：

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

如何轻松显示来自 Node JS 的图像

How to easily display Image from Node JS

html

javascript

image

node.js