在Node.js中通過相對路徑顯示圖像

我正在構建我的第一個Node.js MVC應用程序（本地節點，不使用Express），並且無法通過相對路徑顯示來自我的html文件的圖像。在Node.js中通過相對路徑顯示圖像

饒你我的server.js和router.js代碼，但這裏是我的控制器代碼基本上是加載如何林我的看法：這個被

var fs = require("fs"); 
var controller = require("controller"); 

var load_view = 'view_home'; 
var context = { foo : 'bar' }; 

controller.load_view(res, req, fs, load_view, context);

傳遞給...

var url   = require('url'); 
var Handlebars = require('handlebars'); 

function load_view(res, req, fs, view, context, session){ 

    // Files to be loaded, in order 
    var files = [ 
     'view/elements/head.html', 
     'view/elements/header.html', 
     'view/' + view +'.html', 
     'view/elements/footer.html' 
    ];  

    // Start read requests, each with a callback that has an extra 
    // argument bound to it so it will be unshifted onto the callback's 
    // parameter list 
    for(var i=0; i<files.length; ++i) 
     fs.readFile(files[i], handler.bind(null, i)); 

    var count = 0; 

    function handler(index, err, content) { 

     // Make sure we don't send more than one response on error 
     if(count < 0) return; 
     if(err) { 
      count = -1; 
      console.log('Error for file: ' + files[index]); 
      console.log(err); 
      res.writeHead(500); 
      return res.end(); 
     } 

     // Reuse our `files` array by simply replacing filenames with 
     // their respective content 
     files[index] = content; 


     // Check if we've read all the files and write them in order if 
     // we are finished 
     if(++count===files.length) { 
      res.writeHead(200, { 'Content-Type': 'text/html' }); 
      for(var i = 0; i < files.length; ++i) { 

       var source = files[i].toString('utf8'); 

       // Handlebars 
       var template = Handlebars.compile(source); 
       var html = template(context); 

       res.write(html); /* WRITE THE VIEW (FINALLY) */ 

      } 
      res.end(); 
     } 

    } // handler() 

} // load()

最後，這裏是我的HTML與src屬性標籤和相對路徑：

<div class="help"> 

    <img src="../public/img/test.jpg" /> 

</div>

我的網絡連接因爲它涉及到以上內容如下：

我確定相對路徑是正確的，但已嘗試所有組合的相對路徑甚至絕對路徑。但是，不顯示圖像。

從LAMP背景來看，訪問文件樹中的圖像是微不足道的，但是我意識到服務器在這裏設置很不同（因爲我是設置它的人）。

我通過創建一個單獨的控制器來顯式加載這些文件並使用URI訪問該控制器來訪問文件系統中的其他文件（如樣式表）。但是這種方法對於不確定數量的圖像是不切實際的。

如何訪問&用Node.js在文件系統中顯示我的圖像？

來源

2016-11-16 yevg

你知道node.js在默認情況下不提供任何文件，文件系統不提供任何文件。因此，對於您希望從文件系統提供的每個映像，您都需要確保它被http服務器的路由處理程序覆蓋。對於靜態文件和使用Express之類的框架，通常使用'express.static（）'告訴express在硬盤驅動器上的特定子目錄層次結構中查找任何具有特定路徑前綴的文件。 – jfriend00

而且，您通常不想使用相對路徑，因爲這些路徑相對於您所在頁面的URL而言通常會使事情複雜化多於簡化事情。更典型的是，你會使用'/ public/img/test之類的東西。jpg'，你已經使用了一個路由處理器來查看'/ public'的任何前綴，然後在特定的子目錄層次結構中查找剩餘的路徑。 – jfriend00

而且，如果您使用express和內置的處理欄支持，則在問題中顯示的許多代碼可能會消失。 – jfriend00

我通過創建一個單獨的控制器來顯式加載這些文件並使用URI訪問該控制器來訪問文件系統中的其他文件（如樣式表）。

您需要有一個控制器。這就是代碼如何將瀏覽器請求的URL轉換爲響應。

但是這種方法對不確定數量的圖像不切實際。

然後寫一個通用的。將所有與另一個控制器不匹配的URL或以特定路徑開頭或以.jpg或其他任何邏輯結尾的URL轉換爲基於URL的文件路徑。

讀取文件的內容並輸出合適的HTTP頭（包括正確的內容類型），然後輸出數據。

來源

2016-11-16 23:21:55 Quentin

在Node.js中通過相對路徑顯示圖像

回答

相關問題