使用 Node JS / Express 提供包含图像的静态 HTML 页面
Posted
技术标签:
【中文标题】使用 Node JS / Express 提供包含图像的静态 HTML 页面【英文标题】：Serving a static HTML page containing an image using Node JS / Express 【发布时间】：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？ 【参考方案1】：您需要以静态方式提供资源文件（图像、js、css...）。
为此，请将它们放在一个子目录中，然后在 server.listen 之前添加它
app.use(express.static(__dirname + '/public'));
（假设public 是包含您的静态文件的文件夹的名称）
那么，假设你的图片被称为logo.png，你可以这样称呼它：
<img src="/logo.png" />
【讨论】：
以上是关于使用 Node JS / Express 提供包含图像的静态 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章
Node.js Express js在较大文件上提供静态文件的速度非常慢
尝试通过 express node.js 提供 ejs 文件时出错
使用 Node.js、Handlebars 和 Express 进行模板继承