Как использовать флешку url_for в css файле? - PullRequest
Новая
       13

Как использовать флешку url_for в css файле?

0 голосов
/ 26 июня 2018

Я использую колбу с HTML и CSS. Когда это возможно: 

  <img src="{{ url_for('static', filename='images/planets.jpeg' ) }}">

Что я должен написать здесь, чтобы адрес того же изображения? 

.bgimg-1 {
   background-image: url('https://i.ytimg.com/vi/J9QOB6hSI-c/maxresdefault.jpg');
   min-height: 100%; }

Решение должно выглядеть следующим образом: 

.bgimg-1 {
   background-image: url('{{ url_for('static', filename='images/planets.jpeg' ) }}');
   min-height: 100%; }

Спасибо:)

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Вы обслуживаете css статически, через /static/css/style.css. Когда вы делаете это, Flask не использует Jinja для анализа CSS-файла, как если бы это был шаблон.

Если, однако, у вас есть маршрут (например, @app.route('/css/<file>')), то вы можете использовать метод render_template () для рендеринга вашего CSS-файла, как если бы это был шаблон jinja, который затем будет анализировать директивы jinja (такие как {{url_for()}})

0 голосов
/ 25 марта 2019

Вы не можете использовать Jinja напрямую в файле CSS, поскольку обычно вы не отображаете его как шаблон, но есть 3 альтернативных способа достижения ваших потребностей:

Метод 1

Используйте правильный относительный путь в вашем файле CSS: 

background: url("/static/images/bg.jpg") no-repeat 0px 0px;

Метод 2

Поместите вашу background строку в шаблон: 

<style>
    background: url("{{ url_for('static',filename='images/bg.jpg') }}") no-repeat 0px 0px;
</style>

Метод 3

Определите переменную CSS в вашем шаблоне: 

<style>
    :root {
        --background-url: {{ url_for('static', filename='images/bg.jpg') }}
    }
</style>

Затем используйте его в своем файле CSS: 

background: url("var(--background-url)") no-repeat 0px 0px;
0 голосов
/ 26 июня 2018

Вы можете просто обратиться к сгенерированному URL в вашей функции url_for.

Как пример: 

.bgimg-1 {
   background-image: url('/static/images/planets.jpeg');
   min-height: 100%;
}

Также обратите внимание, что на сам CSS можно ссылаться с помощью: 

<link rel="stylesheet" href="{{ url_for('static', filename='css/planets.css') }}">

UPDATE:

Кроме того, вы можете встроить свой Jinja2 в атрибут style. Например: 

<body style="background-image: url({{ url_for('static', filename='images/planets.jpeg') }});">
<!-- HTML TEMPLATE CODE -->
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...