使用 Node JS / Express 提供包含图像的静态 HTML 页面答案

【问题标题】：Serving a static HTML page containing an image using Node JS / Express使用 Node JS / Express 提供包含图像的静态 HTML 页面
【发布时间】：2014-11-18 18:09:10
【问题描述】：

我能够使用 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”文件， /home/views 中的“index.html”文件

Plutch 提供的解决方案：我将 logo.jpg 移到了我在“/home”下创建的“/images”文件夹中我刚刚添加了这些行 -

server.js

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

index.html

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

由于我使用 ejs 来渲染带有局部变量的页面，如果我将 logo.jpg 放在当前目录而不是单独的图像文件夹中，图像可以正常加载，但“name”和“power”的输出会被打破。

【问题讨论】：

这么多变量，很痛。你能把ejs文件也发一下吗？
ejs 文件？和“index.html”文件一样吗？
在你的情况下，是的，这可能是你的错误，编辑你的问题并添加你的 index.html
已添加。您认为扩展可能是问题所在？哦，我想我们只需要担心 app.set 和 app.engine 语句。其他在大多数程序中都是标准的。
可能是，尝试改变它。我首先想到的是您根本没有使用ejs文件。但它是否正确显示悟空和 9001？

标签： html node.js express ejs

【解决方案1】：

您需要以静态方式提供资源文件（图像、js、css...）。

为此，请将它们放在一个子目录中，然后在 server.listen 之前添加它

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

（假设public 是包含您的静态文件的文件夹的名称）

那么，假设你的图片被称为logo.png，你可以这样称呼它：

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

【讨论】：