I seem to be fine getting an image to render from my app.js file to the main ejs file, but when i change it to a background image, it does not display. Any idea whats up?
my app.js
const express = require("express"),
app = express(),
bodyParser = require("body-parser"),
jade = require("jade"),
path = require('path'),
redis = require('redis');
images = [{image:".jpg"}];
app.use(bodyParser.urlencoded({extended:true}));
app.set("view engine", "ejs");
//render email page
app.get("/email", function(req, res){
res.render("emailMain", {image:images});
});
app.listen(3000, function(){
console.log("Email Server has started");
});
from the ejs page
<tr>
<% for(var i=0; i < images.length; i++){ %>
<td class="vmlHero" background = "<%= images.image %>" style="background-repeat:no-repeat" bgcolor="#000000" width="100%" height="430" valign="top">
I seem to be fine getting an image to render from my app.js file to the main ejs file, but when i change it to a background image, it does not display. Any idea whats up?
my app.js
const express = require("express"),
app = express(),
bodyParser = require("body-parser"),
jade = require("jade"),
path = require('path'),
redis = require('redis');
images = [{image:"http://nuvotera./wp-content/uploads/2013/10/email-protection-banner-2.jpg"}];
app.use(bodyParser.urlencoded({extended:true}));
app.set("view engine", "ejs");
//render email page
app.get("/email", function(req, res){
res.render("emailMain", {image:images});
});
app.listen(3000, function(){
console.log("Email Server has started");
});
from the ejs page
<tr>
<% for(var i=0; i < images.length; i++){ %>
<td class="vmlHero" background = "<%= images.image %>" style="background-repeat:no-repeat" bgcolor="#000000" width="100%" height="430" valign="top">
-
res.render("emailMain", {image:images});did you meanres.render("emailMain", {images:images});– Keith Commented Oct 4, 2017 at 20:26
4 Answers
Reset to default 1I solved as this easiest solution.
ejs file
add this in your css file
body {
width: 100%;
align-items : center;
height: 100%;
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: green;
overflow: hidden;
/* Location of the image */
background-image:url('images/introBackGround.jpg') ;
}
(remove all blockquotes)
router file
you must add this.
app.use(express.static(path.join(__dirname, 'public')));
folder
public
└ images
L css
I was dealing with the same thing and this worked for me:
<div class="containerImage" style="background-image: url('<%= img%>')"></div>
This:
app.get("/email", function(req, res){
res.render("emailMain", {image:images});
});
should be this:
app.get("/email", function(req, res){
res.render("emailMain", {images: images});
});
Note the extra s.
Also, you aren't using the variable i here:
<tr>
<% for(var i=0; i < images.length; i++){ %>
<td class="vmlHero" background = "<%= images.image %>" style="background-repeat:no-repeat" bgcolor="#000000" width="100%" height="430" valign="top">
I think that should be <%= images[i].image %>, or just use a forEach instead.
It's also worth noting that the background attribute of td is deprecated, you could achieve the same effect using a background-image or background in the style.
In your app.js change
res.render("emailMain", {image:images});
To:
res.render("emailMain", {images:images});
And in your .ejs file change
background="<%= images.image %>"
To:
background="<%= images[i].image %>"