我可以使用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’文件,而在’index’中。 / home / views中的html文件
Ploutch提供的解决方案:我将logo.jpg移到了在“ / home”下创建的“ / images”文件夹中,我刚刚添加了以下几行-
app.use(express.static(__dirname + '/images'));
<img src="/logo.jpg" />
由于我正在使用ejs渲染具有局部变量的页面,因此,如果将logo.jpg放置在当前目录中而不是单独的images文件夹中,则该图像会很好地加载,但是“ name”和“ power”的输出将被破坏。
您需要以静态方式提供资源文件(图像,js,css等)。
为此,请将它们放在子目录中,然后在前面添加 server.listen
server.listen
app.use(express.static(__dirname + '/public'));
(假设public是包含您的静态文件的文件夹的名称)
public
然后,假设您的图片被调用,logo.png您可以这样称呼它:
logo.png
<img src="/logo.png" />