Menu
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.
599
In your node application, you can use node-static module to serve static resources. The node-static module is an HTTP static-file server module with built-in caching. First of all, install node-static module using NPM as below. After installing node-static module, you can create static file server in Node.
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express. The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express.static.
Express offers a built-in middleware to serve your static files and modularizes content within a client-side directory in one line of code.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
