節點JS不提供靜態圖片

Question

我已經添加了用於在節點服務器上提供圖像的代碼，但是當連接到Node時，似乎不提供HTML中的圖像。 我還可以正確使用外部CSS和JS。 這是我在Node中的代碼片段（請參見下文）。 先感謝您！

var server = http.createServer(function(req, res) {
    var pathname = url.parse(req.url).pathname;
    var ext = path.extname(pathname);
    var handler = handlers[req.url];
    if(ext) {
        if(ext === ".css"){
            res.writeHead(200, { "Content-Type" : "text/css" });
        }
        else if(ext === ".js") {
            res.writeHead(200, { "Content-Type" : "text/javascript" });
        }
        else if(ext === ".jpg") {
            res.writeHead(200, { "Content-Type" : "image/jpg" });
        }
        res.write(fs.readFileSync(__dirname + pathname, "utf8"));
        res.end();
    }
    else if(handler) {
        handler(req, res);
    }
    else {
        res.writeHead(404, { "Content-type" : "text/plain" });
        res.end();
    }
});
server.listen(80);

Answer 1

當有人嘗試實現自己的靜態文件服務器而不是使用Express或有效的方法而無法使其工作時，我在Stack Overflow上看到了很多類似的問題。 如果可以實現自己的靜態文件服務器，請執行此操作。 如果不能，那么這可能表明它不是一個好主意。 更新：請參閱以下內容，了解不使用Express的解決方案。

問題

僅僅看一下您的代碼，我已經看到了幾個嚴重的問題，包括：

1. 您的代碼不安全 -它允許任何人在您的系統上獲取任何文件。

2. 您的代碼正在阻塞 -一旦獲得任何並發連接，它將立即停止。

3. 您的代碼不適用於二進制文件 -僅適用於文本文件，以及僅適用於UTF-8編碼的代碼

4. 您的代碼不適用於大寫文件名 ， .jpeg擴展名等。

5. 您的代碼無法正確提供HTML文件

6. 文件不存在而不是使用正確的代碼響應時，代碼將崩潰

解

回答這樣的問題的人有兩種選擇：要么花費大量的精力和時間來解決上面提到的每個問題（這種情況很少發生，因為這不是一項瑣碎的任務，這就是為什么您看到的只是評論中提到一個或多個問題的原因其中兩個問題而不是答案）， 或者您可以解釋應如何正確完成任務，而不是對最初不是一個好主意的事情添加無數次修復。

話雖這么說，您可以通過安全有效的方法來實現目標的方法是將靜態文件（HTML，CSS，圖像等）放入目錄（例如html並使用Express （或其他框架） ，請參見下文），其代碼如下所示：

var path = require('path');
var express = require('express');
var app = express();

var htmlPath = path.join(__dirname, 'html');

app.use(express.static(htmlPath));

var server = app.listen(80, function () {
    console.log('listening on port', server.address().port);
});

查看完整的示例，並在GitHub上進行說明：

• https://github.com/rsp/node-express-static-example

我將這個示例放在GitHub上是因為在Stack Overflow上存在很多與人們在Node中提供靜態文件有關的問題。 它是開源的，您可以使其適應自己的需求並在代碼中使用。

有關Express的更多信息，請參見：

• http://expressjs.com/en/4x/api.html

其他選擇

您可以用來提供靜態文件的其他框架包括：

• 興亞 ， 的RESTify ， 哈皮 ， 帆 ， 環回和更多 。

沒有框架

如果您仍然不希望使用能夠正確完成工作的高級框架，並且想推出自己的解決方案（可能出於教育目的），請參見以下答案：

• 如何使用Node.js提供圖片

它說明了如何通過以下方式提供靜態圖片：

1. express.static （ express內置中間件，如此答案）
2. express （ express但沒有express.static ）
3. connect （比express水平低一層）
4. http （使用Node的http模塊）
5. net （甚至不使用http模塊）

發布的所有示例均經過測試，可在節點版本4、5、6和7上運行。

其他相關答案：

• 如何使用Node.js提供圖片
• 重定向Javascript時無法從同一目錄加載資源
• onload js調用不適用於節點
• 使用Express將整個文件夾內容發送到客戶端
• 在服務器JS上加載部分文件失敗