使用Node JS / Express提供包含图像的静态HTML页面 [英] Serving a static HTML page containing an image using Node JS / Express
问题描述
只打开浏览器中的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 =悟空;
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 =namevalue =<％= name％>/>< br>
< input id =powervalue =<％= power％>/>< br>
< / body>
< / html>
我没有包含img src行，所以你可以给我完整的行，人们忽略了我的有时候微妙的语法错误。关于目录结构，我只是在我的/ home文件夹中有这个'server.js'文件，/ home / views中的'index.html'文件
< hr>
Ploutch提供的解决方案：
我将logo.jpg移动到我在'/ home'下创建的'/ images'文件夹
我刚刚添加了行 -
server.js
app.use（express.static（__ dirname +'/ images'））;
index.html
< img src =/ logo.jpg/>
由于我正在使用ejs来渲染带有局部变量的页面，如果我将logo.jpg放在当前目录而不是单独的图像文件夹，图像加载正常，但name和power的输出将被破坏。
您需要以静态方式提供资源文件（图像，js，css，...）。
为此，请将它们放在子目录，然后在 server.listen
app.use（ express.static（__ dirname +'/ public'））;
（假设 public 是包含静态文件的文件夹）
然后，假设您的照片被称为 logo.png ，可以这样称呼：
< img src =/ logo.png/>
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:
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>
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
Solution offered by Ploutch: I moved the logo.jpg to a '/images' folder I created under '/home' I just added these lines -
server.js
app.use(express.static(__dirname + '/images'));
index.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.
You need to serve your resource files (images, js, css, ...) in a static way.
To do this, put them in a subdirectory, then add this before server.listen
app.use(express.static(__dirname + '/public'));
(Assuming public is the name of the folder containing your static files)
Then, assuming your picture is called logo.png you can call it like this :
<img src="/logo.png" />
这篇关于使用Node JS / Express提供包含图像的静态HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
