使用 fs 显示带有图像的 html

Question

我需要在我的服务器中显示一个 html，其中包含一些文本和内容，这些在这里并不重要，并且 第一张图片在给定的文件夹中找到 作为参数。

我找到了另一个答案，其中 fs.readFile 用于直接检索 html 文件，其中图像已经存在，但在这种情况下 我需要为每个图像构建一个 html。。 p>

我试过了，但它没有显示任何图像：

var http = require('http');
const fs = require('fs');

function read_dir(req, res, path="./images") {
    
    let image_urls = fs.readdirSync(path);
    let src = path.split("").slice(1).join("");

    let image = `<img id="image" src="http://localhost:8888${src}/${image_urls[0]}">`;
 
    res.end(image);
}

function onrequest(request, response) {
    // Programs what is going to be sent back to the browser.
    console.log("HTTP request received");

    // Parses command line arguments
    var myArgs = process.argv.slice(2);

    response.writeHead(200, 
        {"Content-Type": 'text/html'}
    );
    response.write(`<h1>SLIDESHOW AREA</h1>`);

    read_dir(request, response, myArgs[0]);
}

// The http.createServer() method turns my computer into an HTTP server.
var server = http.createServer(onrequest);

// The server.listen() method creates a listener on the specified port or path.
// server.listen(port, hostname, backlog, callback);
server.listen(8888);

console.log("Listening on http://localhost:8888/");

Answer 1

好的，所以我发现了丢失的内容。如果您像我一样对服务器非常了解，这可能会有所帮助。

<img src="http://localhost:8888/image/jpeg/campus1.jpg">

服务器读取图片src时，会发送一个GET请求，url为/image/jpeg/campus1.jpg。现在服务器可以显示 HTML 元素，但不能显示 JPEG 元素，这是基本的。

这真的很微妙，图像必须从其文件夹中读取，并正确设置才能显示。

因此，正确的做法是在服务器内部创建一个路由来读取图像并告诉服务器它们的类型为“image/jpeg”。此时，图像已准备好并被烘焙以供 HTML 读取。

var http = require('http');
const fs = require('fs');

let routes = { "/": main, "/image": fileRouter }

function main(req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});

    res.write("<h1>HI</h1>");
    res.write("<h2>Here's an image</h2>");
    res.end(`<img src="http://localhost:8888/image/jpeg/campus1.jpg">`);
}

function fileRouter(req, res) {
    let path = req.url;
    console.log(path);

    fs.readFile("."+path, function(err, data) {
        if(err) {
            res.writeHead(500, { 'Content-Type' : 'text/plain' });
            res.end('500 - Internal Error');
        } else {
            res.writeHead(200, { 'Content-Type' : 'image/jpeg' });
            res.end(data);
        }
    });
}

function onrequest(req, res) {
    //Parse Request
    let url = req.url;
    let route = url.split("/")[1];
    console.log(req.method, req.url);
    
    //Route Request
    if (typeof routes["/" + route] === 'function') { 
        routes["/" + route](req, res);
    } else {
        res.writeHead(404); //not found
        res.end();
    }
}

var server = http.createServer(onrequest);

server.listen(8888);

我希望编程不需要总是让我的脑袋脱臼，事情并不总是有意义的，我有时不明白为什么人们会这样设计东西。但好吧，爱情也并不总是那么容易。祝大家有个愉快的一天！

Answer 2

此标签<img id="image" src="http://localhost:8888${src}/${image_urls[0]}"> 正在尝试通过"http://localhost:8888${src}/${image_urls[0]}" url 访问您的服务器。

所以你需要为浏览器提供它才能下载它。

jpeg 图像使用'Content-type: image/jpeg'header 提供，但在大图像的情况下，您需要进行更复杂的工作，例如缓存、流式传输等；否则页面的加载时间会很容易下降。

建议使用 cloudinary 等服务来提供此类内容。