Передайте E JS Dynami c Шаблон строки в Express CSS Файл для Dynami c Фоновое изображение в элементе HTML - PullRequest
Новая
       17

Передайте E JS Dynami c Шаблон строки в Express CSS Файл для Dynami c Фоновое изображение в элементе HTML

0 голосов
/ 10 февраля 2020

У меня есть рабочий файл css для моего Express e js веб-приложения. Все стили работают нормально, пути в порядке, и т. Д. c.

В одном файле e js у меня, по сути, есть это: 

<%- include ("partials/header") %>
<img src= <%= project.image1 %> width="300px">
<%- include ("partials/footer") %>

Изображение, на которое ссылается project.image1 работает отлично.

Могу ли я сделать это в моем css файле: 

.class {
background-image: url("<%= project.image1 %>");
}

Я просмотрел, возможно, дублирующие вопросы, и, насколько я мог судить, ни один из них не имел отношения к этот вопрос.

1 Ответ

0 голосов
/ 11 февраля 2020

Конечно, он работает только с style в том же файле и не работает для стиля link. Для примера вы можете посмотреть этот код ниже:

сервер. js

const express = require('express');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');

app.set('views', path.join(__dirname, '/views'));

let image = 'https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg';

app.get('/', (req, res) => {

  res.render('home', { image } );
})

app.listen(3000, () => console.log('Server is up on port 3000'));

Только код выше простой пример сервера с express

home.e js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- it's not working with this -->
  <link rel="stylesheet" href="style.css">

  <!-- it's only working with this -->
  <style>
    .my-background {
      width: 100%;
      height: 200px;
      /* this is my ejs variable: image */
      background-image: url('<%= image %>'); 
      background-repeat: repeat;
      background-size: 100px;
      background-position: left;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
  <div class="my-background"></div>
</body>
</html>

Я надеюсь, что это может помочь вам.

...