使用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页面

回答

相关问题