Question

我可以使用express提供静态HTML页面。我还安装了＆＃34; ejs＆＃34;使用我的.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行，所以你可以给我一个完整的行，人们有时会忽略我的微妙语法错误。关于目录结构，我只是有这个＆＃39; server.js＆＃39;我/ home文件夹中的文件和＆＃39; index.html＆＃39;文件在/ home / views

Ploutch提供的解决方案：我将logo.jpg移到了＆＃39; / images＆＃39;我在＆＃39; / home＆＃39;下创建的文件夹我刚刚添加了这些行 -

server.js

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

的index.html

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

由于我使用ejs渲染具有局部变量的页面，如果我将logo.jpg放在当前目录而不是单独的图像文件夹中，则图像加载正常，但输出＆＃34; name＆＃34;和＆＃34;电源＆＃34;将被打破。

Answer 1

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

要执行此操作，请将它们放在子目录中，然后在server.listen

之前添加它

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

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

然后，假设您的照片被称为logo.png，您可以这样称呼它：

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

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

1 个答案: