Django не рендерит фоновые изображения, используемые в теге url <style>

Я пытаюсь рендерить статические файлы изображений с помощью Django и впервые столкнулся с изображениями, на которые ссылается тег стиля <div class="img" style="background-image: url;"></div> стилевой тег.

Я загружу код и сайт в том виде, в котором он отображается при запуске сервера.

<div class="founder d-flex align-items-center mt-5">
                            <div class="img" style="background-image: url('/static/images/doc-1.jpg');"></div>
                            <div class="text pl-3">
                                <h3 class="mb-0">Dr. Zen Goode</h3>
                                <span class="position">CEO, Founder</span>
                            </div>
                        </div>

Вот что показывает вывод, когда я запускаю сервер. (Конечно, здесь показаны другие файлы изображений, но я предполагаю, что это одно и то же):

[22/Jul/2022 06:04:36] "GET /static/images/person_2.jpg HTTP/1.1" 404 1816 django.core.exceptions.SuspiciousFileOperation: Объединенный путь (S:\maps.googleapis.com\maps\api\js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false) находится вне компонента базового пути (C:\Wor\dentistt\dentist\static)

[22/Jul/2022 06:04:36] "GET /static/images/doc-4.jpg HTTP/1.1" 404 1807

[22/Jul/2022 06:04:36] "GET /static/images/person_1.jpg HTTP/1.1" 404 1816

[22/Jul/2022 06:04:36] "GET /static/images/person_3.jpg HTTP/1.1" 404 1816

[22/Jul/2022 06:04:36] "GET /static/website/https%3A/maps.googleapis.com/maps/api/js%3Fkey%3DAIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s%26sensor%3Dfalse HTTP/1.1" 500 59

[22/Jul/2022 06:04:36] "GET /static/images/person_4.jpg HTTP/1.1" 404 1816

[22/Jul/2022 06:04:36] "GET /static/images/image_3.jpg HTTP/1.1" 404 1813

[22/Jul/2022 06:04:36] "GET /static/images/image_1.jpg HTTP/1.1" 404 1813

[22/Jul/2022 06:04:36] "GET /static/images/image_2.jpg HTTP/1.1" 404 1813

А это сайт: Site as loaded

Я знаю, что при ошибке 404 файлы не найдены, так как я могу правильно отобразить изображение здесь?

Похоже, что у вас проблема с обслуживанием статического файла. есть два способа

В производстве всегда хорошая идея обслуживать статический файл через любой сервер, такой как nginx или apache, используя обратный прокси.

для разработки

from django.conf import settings
from django.conf.urls.static import static

# Add +static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns = [
   # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

На вашем settings.py файле:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"), # your static/ files folder
]

STATIC_ROOT=os.path.join(BASE_DIR, "static_root")

запустите python manage.py collectstatic

Для того, чтобы отобразить статическое изображение каталога в вашем шаблоне, вы должны сделать несколько вещей.

  1. перейдите в файл settings.py вашего проекта и сделайте следующее:

    STATIC_DIR=(Path(file).parent).joinpath(BASE_DIR,'static')

прокрутите вниз ваш файл settings.py и ниже STATIC_URL='/static/ write:

STATICFILES_DIRS=[STATIC_DIR,]

  1. в вашем шаблоне/yourhtmlfile.html добавьте следующее в верхней части вашего .html файла

    {% load static %}

<script>
    var image_one={% static '/images/doc-1.jpg' %}
 <div class="img" style="background-image: url(image_one);"></div

Вернуться на верх