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

Question

我可以使用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”的输出将被破坏。

Answer 1

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

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

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

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

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

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

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

问题描述

1 个解决方案

解决方案1
9 已采纳 2014-09-24 11:07:30

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

问题描述

1 个解决方案

解决方案1 9 已采纳 2014-09-24 11:07:30

解决方案1
9 已采纳 2014-09-24 11:07:30