Serving a static HTML page containing an image using Node JS / Express

Question

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.

In your case, yes, and that may be your error, edit your question and add your index.html — DrakaSAN
– DrakaSAN, Commented Sep 24, 2014 at 10:35
Added. You think the extension may be the problem ? Oh, I think we only need to worry about the app.set and app.engine statements. The others are all standard in most programs. — anon_16
– anon_16, Commented Sep 24, 2014 at 10:40
May be yes, try to change it. What I first thought was that you didn t used a ejs file at all. But does it display Goku and 9001 correctly? — DrakaSAN
– DrakaSAN, Commented Sep 24, 2014 at 10:42

ploutch · Accepted Answer · 2014-09-24 11:07:30Z

16

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" />

answered Sep 24, 2014 at 11:07

ploutch

1,21410 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Serving a static HTML page containing an image using Node JS / Express

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related