Как установить фоновое изображение динамически в Jinja2? - PullRequest
Новая
       2

Как установить фоновое изображение динамически в Jinja2?

1 голос
/ 08 мая 2019

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

 <header class="masthead" style="background-image: url('img/about-bg.jpg')">

Но, так как я использую Flask с Jinja2. Поэтому я бы хотел сделать это динамически. 

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

К сожалению, это не работает для меня. Поэтому я пытаюсь найти в Google несколько похожих вопросов, но в конце концов выясняю мою проблему. Я надеюсь, что я могу загрузить свое изображение с собственным изображением. так что это может понравиться:

Для post-01

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

Для post-02

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-02.jpg')}}"
>

Кто-нибудь может мне помочь?

jinja2 set background image

https://www.quora.com/How-do-I-set-a-background-in-CSS-via-Flask

1 Ответ

1 голос
/ 08 мая 2019

Мы можем передать имя файла или путь к файлу из приложения Flask в шаблон и отобразить изображение в качестве фона любого элемента HTML.

Здесь я показываю пример передачи идентификатора блога и имени файла из приложения Flaskк шаблону.Изображения хранятся в папке static.

Структура каталогов: 

├── app.py
├── static
│   └── images
│       ├── 1.jpg
│       └── 2.jpg
└── templates
    └── blog.html

app.py: 

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/blog/<int:blog_id>')
def show_post(blog_id):
    filename = "{}.jpg".format(blog_id)
    return render_template('blog.html', blog_id=blog_id, filename=filename)

blog.html: 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Flask Dynamic Background in Bootstrap Jumbotron</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <main role="main">
    <section class="jumbotron text-center" style="background-image: url({{url_for('static', filename='images/'+filename)}})">
      <div class="container" style="color: white;">
        <h1 class="jumbotron-heading">Example Blog Post No: {{ blog_id }}</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </section>
  </main>
</body>
</html>

Вывод:

  • Посещение блога с идентификатором 1:

blog post 1

  • Посещение блога с идентификатором 2:

blog post 2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...