Menu
I am new to nodejs. I want to create a very simple website which has 3 pages. In every page I want to display an image to make the pages look uniform.
My code looks like this:
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var fs = require('fs');
var mail = require("nodemailer").mail;
/*List of variables*/
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.get('/main', function(req, res) {
fs.readFile('./home.html', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});
});
/* After this I have code for post event - all these navigation works perfectly fine*/
in home.html file I have an image to display:
/*Header part of HTML file*/
<body>
<img class="logo" src="./Heading.png" alt="My_Logo">
console.log (src);
<h1 class="center">Welcome to message reprocessing</h1>
</br>
</body>
This image is not displayed in my browser. When I check my console I have this error:
GET http://localhost:3000/Heading.png 404 (Not Found)
Please help, thanks
332
That is why I created node-html-to-image. A Node.js module that generates images from HTML. Here is the simplest example, you provide an output path and a HTML string. That’s all! .then(() => console.log('The image was created successfully!'))
A Node.js module that generates images from HTML. Here is the simplest example, you provide an output path and a HTML string. That’s all! .then(() => console.log('The image was created successfully!')) I talked about automation earlier. It comes with a templating engine, Handlebars. It enables creating multiple images using the same template.
Thanks You can display your data by creating a string of the image file in your component like so: And then binding this string to the src property of an img tag in the view like so: While the above solution should work it would be better to just create the url to the image on the client side and then reference the url in the html.
You may refer to this article for setting up handlebars View Engine in Node.js. app.listen (PORT, () => console.log (`Server started running on PORT $ {PORT}`)); Change the default view engine to handlebars: To serve static files like images from a directory named “images”
First, you have to set the public (folder) as static under server.js file
server.js
// configure our application
const Express = require('express');
const app = new Express();
.......
.......
app.use(Express.static(__dirname+'/public'));
.......
then your img source will be
<img class="logo" src="/images/Heading.png" alt="My_Logo">
and here the folders structure would be -
project(root folder) \ public \ images\ Heading.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
