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

一尘不染

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

node.js

我可以使用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”文件夹中，我刚刚添加了以下几行-

server.js

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

index.html

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

由于我正在使用ejs渲染具有局部变量的页面，因此，如果将logo.jpg放置在当前目录中而不是单独的images文件夹中，则该图像会很好地加载，但是“
name”和“ power”的输出将被破坏。

阅读 286

2020-07-07

共1个答案

一尘不染

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

为此，请将它们放在子目录中，然后在前面添加 server.listen

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

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

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

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

2020-07-07