将背景图像添加到 EJS 文件答案

【问题标题】：Adding Background image to EJS file将背景图像添加到 EJS 文件
【发布时间】：2018-03-16 08:38:28
【问题描述】：

我似乎很好地将图像从我的 app.js 文件渲染到主 ejs 文件，但是当我将其更改为背景图像时，它不会显示。知道怎么了？

我的 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.com/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");
});

来自 ejs 页面

<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}); 你的意思是res.render("emailMain", {images:images});

标签： javascript express ejs

【解决方案1】：

我解决了这个最简单的解决方案。

ejs 文件

将此添加到您的 css 文件中

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') ;
    }

（删除所有块引用）

路由器文件

你必须添加这个。

app.use(express.static(path.join(__dirname, 'public')));

文件夹

public
 └ images
  L css

【讨论】：

【解决方案2】：

在您的 app.js 中更改

res.render("emailMain", {image:images});

收件人：

res.render("emailMain", {images:images});

并在您的 .ejs 文件中更改

background="<%= images.image %>"

收件人：

background="<%= images[i].image %>"

【讨论】：

【解决方案3】：

这个：

app.get("/email", function(req, res){
  res.render("emailMain", {image:images});
});

应该是这样的：

app.get("/email", function(req, res){
  res.render("emailMain", {images: images});
});

注意额外的s。

另外，您在这里没有使用变量i：

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

我认为应该是<%= images[i].image %>，或者直接使用forEach。

还值得注意的是td 的background 属性已被弃用，您可以在样式中使用background-image 或background 来达到相同的效果。

【讨论】：