Django not rendering background images used in url <style> tag

user_19040028 0
Viewed 29

I am trying to render static image files with Django and this is the first time I have encountered images referenced with the <div class="img" style="background-image: url;"></div> style tag.

I will upload the code and the site as is showing when I run the server.

<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>

This is what the output shows when I run the server. (Of course, it shows other image files here but I assume its just the same):

[22/Jul/2022 06:04:36] "GET /static/images/person_2.jpg HTTP/1.1" 404 1816 django.core.exceptions.SuspiciousFileOperation: The joined path (S:\maps.googleapis.com\maps\api\js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false) is located outside of the base path component (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

And this is the site: Site as loaded

I know that with the 404 error, the files are not being found so how I can render the image correctly here?

static-linking django-templates css django-views django
2 Answers

It seems like you have issue with serving static file. there are two ways

In production it's always good idea to serve static file through any server like nginx or apache using reverse proxy.

for developement

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)

On your settings.py file:

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

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

run the python manage.py collectstatic

user_20899290

in order to display static directory image to your template you have to do couple of things.

  1. go to your project settings.py file and do the following:

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

scroll all the way down of your settings.py file and below STATIC_URL='/static/ write:

STATICFILES_DIRS=[STATIC_DIR,]

  1. in your template/yourhtmlfile.html add following at the top of your .html file

    {% load static %}

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

user_68456350
Related