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

Question

我可以使用express提供靜態HTML頁面。 我還安裝了“ejs”，用我的.js文件中的局部變量數據呈現頁面。 我只需要在頁面的一角顯示一個小徽標以及其他數據。 在瀏覽器中打開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行，所以你可以給我完整的一行，人們有時會忽略我微妙的語法錯誤。關於目錄結構，我只在我的/ home文件夾中有'server.js'文件和'索引。 html'文件在/ home / views中

Ploutch提供的解決方案：我將logo.jpg移動到我在'/ home'下創建的'/ images'文件夾中我剛剛添加了這些行 -

server.js

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

的index.html

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

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

Answer 1

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

為此，請將它們放在子目錄中，然后在server.listen之前添加它

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

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

然后，假設您的圖片名為logo.png您可以這樣調用它：

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

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

問題描述

1 個解決方案

解決方案1
9 已采納 2014-09-24 11:07:30

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

問題描述

1 個解決方案

解決方案1 9 已采納 2014-09-24 11:07:30

解決方案1
9 已采納 2014-09-24 11:07:30