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.
See Question&Answers more detail:os
