Node.js：我的HTML需要一張圖片

Question

看，我正在使用Node（和TS btw）進行培訓，並嘗試使用多個請求/響應選項來構建一個普通的服務器。 但是我有一個問題，如果不使用Express，我不知道該如何解決（至少到目前為止，我不想使用它）。

我有一個請求圖像文件的HTML文件。 在IDE中時，一切看起來都可以正常工作，但是在服務器運行時，找不到映像。 顯而易見的原因是：HTML發出服務器不知道如何處理的請求。 問題是，我認為該文檔可以引用其他文件，而無需與服務器對話。

什么是解決我的問題的優雅且可行的解決方案？

提前致謝。

import * as http from 'http'
import * as fs from 'fs'

fs.readFile('doc/kmCNHkq.jpg', function (err, data) {
    let binaryimg = new Buffer(data).toString('base64'); 
    if (err) throw err;

    http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'image/jpeg'});
        res.end(data);
        console.log("Delivered the jpeg");
    }).listen(8000); 

    http.createServer(function(req, res) {
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end(binaryimg);
        console.log("Delivered base64 string");
    }).listen(8124);

    console.log("Unless bug, both servers are listening");
});

fs.readFile('doc/index.html', function(err, data) {
    http.createServer(function(req,res) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data)
    }).listen(80);
    console.log("HTML server is running")
})

（main.ts；目標ES6）

<html>
    <head>

    </head>

    <body>
        <img src="doc/kmCNHkq.jpg"/>
    </body>
</html>

（index.html）

觀察：我曾經將HTML文件保留在“ ../doc/”中，並將資源保留在“ ../img/”中，但是似乎HTML使用了相對路徑，因此我將圖像復制到了HTML的文件夾中。 如果該解決方案也做到了這一點，那么我可以將資源保留在它們各自的文件夾中，將不勝感激。

@Edit：現在我正在使用此切換/案例請求處理程序。 按預期工作，HTML對圖像的請求被解釋為正常請求（可能最終無法很好地縮放，idk，但將其擰緊）。 非常感謝！

import * as http from 'http'
import * as fs from 'fs'

var stream: fs.ReadStream,
    folder = __dirname.substr(0, __dirname.length - 3);

http.createServer(function(req,res) {
    switch (req.url){
        case('/jpeg'):
            stream = fs.createReadStream(folder + 'img/kmCNHkq.jpg');
            stream.pipe(res);

            console.log("Delivering the jpeg");
            break;

        case('/base64'):
            fs.readFile('img/kmCNHkq.jpg', function (err, data) {
                let img64 = new Buffer(data).toString('base64');
                if (err) throw err;
                res.end(img64);

                console.log("Delivered base64 string");
            })

            break;

        case('/html'):
            stream = fs.createReadStream(folder + 'doc/index.html');
            stream.pipe(res);

            console.log("Sending the docs");
            break;

        default:
            console.log("Shit happens");
    }
}).listen(80)

（main.ts）

<html>    
    <body>
        <img src="jpeg"/>
    </body>
</html>

（index.html）

Answer 1

簡短答案：

除非服務器知道如何響應對這些內容的請求，否則您將無法引用服務器上的特定資源（例如圖像）。 通過將圖像src更改為http://localhost:8000您似乎可以使您的示例立即輕松工作。

更長的答案：

使用“ doc / kmCNHkq.jpg”作為圖像的src告訴您的瀏覽器，當加載頁面時，它應該轉到從其獲取頁面的服務器，並要求其提供“ doc / kmCNHkq.jpg”資源。 如果您指定一個包含協議的完整URL（http：//），則它將是絕對的，而不是相對的，因此您可以從與服務該頁面的服務器不同的服務器請求。

您編寫的服務器實際上並不會查看所請求文件的路徑（ req.url ），實際上它們總是返回相同的內容。 如果您連接到http://localhost:80 （在上面創建的第三台服務器），並且確實請求jpg，您仍然會得到與頁面相同的HTML數據，因為它只運行了其中的兩行您的示例末尾的createServer調用。 您已經編寫了一個總是在其他端口上運行但總是返回映像的服務器（第一台服務器），這就是上面的解決方案起作用的原因。

僅使用該現有服務器是最簡單的解決方案。 不過，更傳統的方法是在單個端口上運行單個HTTP服務器（而不是在您的3個端口上），並使用req.url決定返回什么數據。

傳統上，對於靜態內容而言，這意味着將請求的路徑直接映射到磁盤上文件的布局，以便請求doc / abc.jpg在服務器目錄中查找doc文件夾，並從其中的abc.jpg返回數據。 但這根本不是必需的，並且服務器可以根據需要解釋這些路徑，以從任何地方返回內容。

（請注意，這實際上與TypeScript無關，甚至與Node.js無關。這實際上只是HTTP服務器和瀏覽器交互方式的基本要素，並且與任何其他支持技術幾乎相同。如果您想了解更多有關HTTP和瀏覽器的詳細信息，我會做進一步的介紹。）

Node.js：我的HTML需要一張圖片

問題描述

1 個解決方案

解決方案1
1 已采納 2016-05-02 21:43:08

Node.js：我的HTML需要一張圖片

問題描述

1 個解決方案

解決方案1 1 已采納 2016-05-02 21:43:08

解決方案1
1 已采納 2016-05-02 21:43:08