2

Django видит изображения в папках, проверял командой ./manage.py findstatic images/logo.png, стиль подгрузился нормально, но в логах нет ни каких упоминаний о logo.png, ни ошибки ни чего, по урлу картинка открывается корректно http://127.0.0.1:5000/images/logo.png.

settings.py:

STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_ROOT = os.path.join(
    BASE_DIR, 'static/images'
)

urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls'))
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

main.css

header .logo a {
    display: block;
    margin: 0;
    padding: 0;
    outline: 0;
    border: none;
    width: 60px;
    height: 60px;
    background: url("/static/images/logo.png") no-repeat center;
    background-size: 60px 60px;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out;
}

Лог main.css

[29/Jun/2020 08:17:51] "GET /static/css/base.css HTTP/1.1" 200 13542

Код с шаблона html:

<header class="short-header">
    <div class="logo">
        <a href="{% url 'home' %}">Home</a>
    </div>
</header>

Скрин Network в браузере:

Скриншот

Скрин ошибка в Network:

Скрин ошибка в Network

Сама картинка отображается на странице корректно <img src="{% static 'images/logo.png' %}" alt="">:

Скриншот лого на странице

При в ставке <style> прям в шаблон код отрабатывает, но необходимо что б все подгружалось через сам css, ниже пример с шаблона html:

{% load static %}

<style>
    header .logo a {
        display: block;
        margin: 0;
        padding: 0;
        outline: 0;
        border: none;
        width: 60px;
        height: 60px;
        background: url("{% static 'images/logo.png' %}") no-repeat center;
        background-size: 60px 60px;
        font: 0/0 a;
        text-shadow: none;
        color: transparent;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
</style>

Что может быть не так?

10
  • Если в логах нет запроса, то браузер не делает запрос. Как в html используется стиль? 29 июн 2020 в 9:15
  • <link rel="stylesheet" href="{% static 'css/main.css' %}">, так лог показывает что код 200 29 июн 2020 в 9:17
  • @АндрейСаламов вы консоль браузера смотрели? Что в Netwoking и что в инспекторе элементов? 29 июн 2020 в 9:22
  • @АндрейСаламов во-первых, отвечайте не в коментариях, а исправляйте текст вопроса (кнопкой править). Во-вторых, мой вопрос в том, как используется стиль, а именно - css-то вы подгрузили, но вот есть ли элемент в html, к которому стиль с фоном применяется? 29 июн 2020 в 9:27
  • Да есть конечно, сейчас поправлю, и покажу что в консоле 29 июн 2020 в 9:37

1 ответ 1

2

Проблема в том, что css файл отдается, как есть и не обрабатывается движком шаблонов django. Т.е. теги шаблонов типа {% url ... %} или {% static ... %} никто не интерпретирует.

Рабочий способ это создать django view для того, чтобы css файл обрабатывался:

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    ...
    path('path/to/main.css', TemplateView.as_view(
        template_name='main.css',
        content_type='text/css')
    ),
    ...
]

Ну и включить в html:

<link rel="stylesheet" href="{% url 'main.css' %}" type="text/css">
1
  • Это моя опечатка </header> в проекте закрыт корректно, у меня html + CSS + js проект скачан отдельно, и код корректно отрабатывает, проблема возникает в отображении картинки в Django 29 июн 2020 в 13:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.