ano*_*_16 4 html ejs node.js express
我可以使用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"的输出将被破坏.
您需要以静态方式提供资源文件(images,js,css,...).
为此,请将它们放在子目录中,然后再添加它 server.listen
app.use(express.static(__dirname + '/public'));
(假设public是包含静态文件的文件夹的名称)
然后,假设您的图片被调用,logo.png您可以这样调用它:
<img src="/logo.png" />
| 归档时间： |
|
| 查看次数： |
19354 次 |
| 最近记录： |