Node.js：我的HTML需要一個圖像

請參閱我正在使用Node（和TS btw）進行培訓，並嘗試使用多個請求/響應選項來執行一項簡單的服務器。但我有一個問題，我不知道如何解決，而不使用Express（至少現在我不想使用它）。Node.js：我的HTML需要一個圖像

我有一個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文件夾中。如果解決方案也是這樣，我可以將資源留在他們各自的文件夾中，這將非常感激。

@編輯：現在我正在使用此開關/案件請求處理程序。按照預期工作，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）

來源

2016-05-02 eduardogbg

簡短的回答：

您將無法引用特定資源的服務器（比如你的圖片），除非你的服務器知道如何響應那些內容的請求。它看起來像你可以讓你的例子很容易立即工作，雖然通過改變圖像src只是http://localhost:8000雖然。

較長的答案：

使用「文檔/ 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和瀏覽器的細節。）

來源

2016-05-02 21:43:08

正是我在找的東西。看，我只引用了TS和Node，以便人們可以知道如何閱讀代碼。然而，解決方案需要的是結構性解決方案。我一直知道多個端口非常笨重，所以'IncomingMessage.url'的建議確實有幫助。我會告訴你代碼如何結束。還有改進的空間，但肯定會更好。 – eduardogbg

Node.js：我的HTML需要一個圖像

回答

相關問題