logo标签列表

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

htmlnode.jsexpressejs
8
我可以使用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' 文件和 /home/views 文件夹中的 'index.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"的输出将会出错。

这么多变量，真让人头疼。你能同时发布ejs文件吗？ - DrakaSAN
ejs文件？这和“index.html”文件是一样的吗？ - anon_16
已添加。你认为扩展名可能是问题吗？ 哦，我想我们只需要担心app.set和app.engine语句。其他的在大多数程序中都是标准的。 - anon_16
可能是，试着改一下。我最初认为你根本没有使用ejs文件。但是它是否正确显示Goku和9001？ - DrakaSAN
重命名为.ejs也没有帮助，我提到的文件路径也对我没用。 - anon_16
显示剩余4条评论
1个回答
16

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

为此，将它们放在子目录中，然后在server.listen之前添加以下内容。

app.use(express.static(__dirname + '/public'));
假设 public 是包含您的静态文件的文件夹名称，则假设您的图片名为 logo.png，您可以按如下方式调用它：
<img src="/logo.png" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接