使用Node JS/Express提供包含圖像的靜態HTML頁面

我可以使用express提供靜態HTML頁面。我還安裝了「ejs」以在我的.js文件中使用本地變量的數據來呈現頁面。我只需要在頁面的角落顯示一個小徽標以及其他數據。只需在瀏覽器中打開html文件即可加載圖像，但服務器出現碎片。我認爲這可能是我的文件路徑或目錄結構的問題。這裏是沒有徒勞的嘗試我原來簡單的代碼：使用Node JS/Express提供包含圖像的靜態HTML頁面

server.js

var express = require ('express'); 
var fs = require ('fs'); 
var app = express(); 
var bodyParser = require ('body-parser'); 
app.use (bodyParser()); 
var server = require ('http').createServer (app); 
app.set('views', __dirname + '/views'); 
app.engine('.html', require('ejs').__express); 

var my_name="Goku"; 
var my_power=9001; 

app.get ('/', function (req, res){ 
    console.log ('GET /'); 
    res.render('index.html',{name:my_name,power:my_power});  
    }); 

server.listen (8888);

的index.html

<html> 
<body> 
<input id="name" value=" <%=name%> " /><br> 
<input id="power" value=" <%=power%> "/><br> 
</body> 
</html>

我沒有包括IMG SRC行，以便你可以給我一個完整的系列，有時候人們會忽略我細微的語法錯誤。關於目錄結構，我只在這個'server.js'文件中我的文件夾和/家「的index.html」文件/視圖通過Ploutch提供

解決方案：我感動logo.jpg到我下一個「/ home」我創建了一個「/圖片」文件夾剛剛添加這些行 -

server.js

app.use(express.static(__dirname + '/images'));

的index.html

<img src="/logo.jpg" />

由於我使用ejs來渲染帶有局部變量的頁面，如果我將logo.jpg放在當前目錄而不是單獨的圖像文件夾中，圖像加載正常，但「name」和「power 「將被打破。

來源

2014-09-24 anon_16

這麼多var，它受傷了。你可以發佈ejs文件嗎？ – DrakaSAN 2014-09-24 09:47:24

ejs文件？這與「index.html」文件相同嗎？ – 2014-09-24 10:30:42

在你的情況，是的，這可能是你的錯誤，編輯你的問題，並添加您的index.html – DrakaSAN 2014-09-24 10:35:51

您需要以靜態方式提供資源文件（圖像，js，css，...）。

要做到這一點，把它們放在一個子目錄，然後server.listen

app.use(express.static(__dirname + '/public'));

前添加（假設public是包含您的靜態文件的文件夾的名稱）

然後，假設您的圖片是叫做logo.png你可以這樣稱呼它：

<img src="/logo.png" />

來源

2014-09-24 11:07:30 ploutch

謝謝Ploutch，解決了這個問題！ – 2014-09-24 12:02:52

使用Node JS/Express提供包含圖像的靜態HTML頁面

回答

相關問題