如何轻松地从 Node JS 显示图像答案

【问题标题】：How to easily display Image from Node JS如何轻松地从 Node JS 显示图像
【发布时间】：2022-02-02 19:11:05
【问题描述】：

我找不到如何在我的网站上显示图像的简单解决方案。我可以在我的 node 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);
        }
    );
};

【问题讨论】：

我看不到该代码将如何生成下载。如果你为src 赋值，它要么将其显示为图像，要么将资源作为无效资源丢弃。它不会下载它。原因必须在您共享的代码之外。您需要提供minimal reproducible example。
您能否将文件放置在诸如 public 之类的静态文件夹中并使用 express 提供该文件夹？
你的意思是serve an image 吗？
@ikhvjs ，这应该会有所帮助。
express.static 对我有用。非常感谢！

标签： javascript html node.js image

【解决方案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);
        }
    );
};

【讨论】：