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

html node.js express ejs

23,975

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

23,975

Author by

anon_16

Updated on September 25, 2020

Comments

anon_16 over 3 years
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.