使用 Node JS / Express 提供包含图像的静态 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26013675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Serving a static HTML page containing an image using Node JS / Express
提问by anon_16
I am able to serve static HTML pages using express. I also installed "ejs" to render the page with data from local variables in my .js file. I just need to display a small logo in the corner of the page along with the rest of the data. Opening just the html file in the browser loads the image just fine, but with the server I get a broken image. I think it may be a problem with my file path or directory structure. Here is my original simple code without the futile attempts:
我能够使用 express 提供静态 HTML 页面。我还安装了“ejs”以使用来自我的 .js 文件中的局部变量的数据呈现页面。我只需要在页面的角落显示一个小徽标以及其余数据。在浏览器中只打开 html 文件加载图像就好了，但是在服务器上我得到了一个损坏的图像。我认为这可能是我的文件路径或目录结构的问题。这是我没有徒劳尝试的原始简单代码：
server.js
服务器.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
<html>
<body>
<input id="name" value=" <%=name%> " /><br>
<input id="power" value=" <%=power%> "/><br>
</body>
</html>
I have not included the img src line so that you can give me the complete line, people overlook my subtle syntax errors sometimes.Regarding directory structure, I just have this 'server.js' file in my /home folder and the 'index.html' file in /home/views
我没有包含 img src 行，所以你可以给我完整的行，人们有时会忽略我微妙的语法错误。关于目录结构，我的 /home 文件夹中只有这个“server.js”文件和“index.js”文件。 /home/views 中的 html' 文件
Solution offered by Ploutch: I moved the logo.jpg to a '/images' folder I created under '/home' I just added these lines -
Ploutch 提供的解决方案：我将 logo.jpg 移动到我在“/home”下创建的“/images”文件夹中，我刚刚添加了这些行 -
server.js
服务器.js
app.use(express.static(__dirname + '/images'));
index.html
索引.html
<img src="/logo.jpg" />
Since I am using ejs to render the page with local variables, if I place the logo.jpg in the current directory instead of a separate images folder, the image loads fine but the output of "name" and "power" will be broken.
由于我使用 ejs 来渲染带有局部变量的页面，如果我将 logo.jpg 放在当前目录而不是单独的图像文件夹中，图像加载正常，但“名称”和“电源”的输出将被破坏。
回答by ploutch
You need to serve your resource files (images, js, css, ...) in a static way.
您需要以静态方式提供资源文件（图像、js、css 等）。
To do this, put them in a subdirectory, then add this before server.listen
为此，请将它们放在子目录中，然后在此之前添加 server.listen
app.use(express.static(__dirname + '/public'));
(Assuming publicis the name of the folder containing your static files)
（假设public是包含静态文件的文件夹的名称）
Then, assuming your picture is called logo.pngyou can call it like this :
然后，假设您的图片被调用，logo.png您可以这样调用它：
<img src="/logo.png" />
