Error 404: Django failing to load image on the webpage

Just starting out with Django and I've hit a snag trying to load a static file (image). Here's the error message I'm getting:

127.0.0.1/:1707 GET http://127.0.0.1:8000/static/css/static/images/background/1.jpg 404 (Not Found)

I suspect the issue lies in the path, but I can't figure out where this /static/css/ is coming from. Any ideas?

Here are snippets from my settings.py file:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'evillio/static')
]

And here's part of my index.html file:

<section class="home-one home1-overlay **home1_bgi1**">
        <div class="container">
            <div class="row posr">
                <div class="col-lg-12">
                    <div class="home_content">
                        <div class="home-text text-center">
                            <h2 class="fz55">Find Your Dream Home</h2>
                            <p class="fz18 color-white">From as low as $10 per day with limited time offer discounts.</p>
                        </div>

Additionally, here's what my CSS file looks like:

home1_bgi1{
  background-image: url('static/images/background/1.jpg');
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  height: 960px;

Upon inspecting the page, here's what it looks like:

https://i.sstatic.net/SWYPq.png

Answer №1

Make sure you added {% load static %} at the beginning of your file.

In the most recent iteration of Django, there have been some changes in Setting.py:

`STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'evillio/static')
]`

For Django 3.1, modify the code as follows:

`STATICFILES_DIRS = [
    BASE_DIR / "static",
    '/var/www/static/',
]`

Refer to the Django 3.1 documentation to stay updated on any code revisions from previous versions. https://docs.djangoproject.com/en/3.1/howto/static-files/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show a concealed dropdown menu within a CSS grid column utilizing clip-path styling

Working on a Django admin header that makes use of CSS grid to create two columns. I have added a JavaScript dropdown effect to the user icon for displaying options like "Change Password" and "Log Out". However, encountering an issue where the dropdown rem ...

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

I am completely new to the world of JavaScript, HTML, and CSS, so I'm feeling a bit lost on how to proceed with this task. My goal is to create a script that will initially display some text through a specific function. Once that text has been displa ...

Creating dynamic text overlay on images using CSS with adjustable position

I have a collection of 11 divs, with 8 containing images and 3 displaying ':'. https://i.sstatic.net/Vfljg.png All 11 boxes are enclosed within a class called "timer", structured as shown below: <div class="timer"> <div><img&g ...

PHP - Truncated html string when appending

I have a situation where I am using PHP to generate HTML for the MPDF library in order to create a PDF file. However, when I include a loop within my PHP-generated HTML, it seems to be cutting off the initial part of the string. Below is the code snippet: ...

Integrate a PHP link into a Gatsby/React project

I've been attempting to connect my contact form page, contactpage.php, with my Gatsby application. In the navigation bar (found in the Components folder), I've added the following code: <div> <a className="int_link_about" ...

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

What is the best way to make sure flexbox items fill in any available space?

I am currently working on a website project, and I am looking to display text content in two columns using flexbox with each column taking up 50% of the width. However, I am encountering an issue as illustrated in the image below: https://i.sstatic.net/Gh ...

Issue with ng-true-value in AngularJS version 1.6.1 - not functioning as expected

Recently, I delved into AngularJS and followed an online tutorial that showcased how to utilize ng-true-value and ng-false-value. Here's the snippet: <!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis ...

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

Why are the tabs in Angular displaying differently when the tab titles exceed 8 characters with Bootstrap 5?

Angular 14 Bootstrap 5 I developed a custom tabs component with pipes between the tabs that works flawlessly. However, I encountered an issue where the tabs slightly shift when the tab title exceeds 8 characters. Despite my efforts, I cannot pinpoint the ...

How can custom data be incorporated into ListAPIView within the django rest framework?

If an assortment of assorted movie data, I've developed a unique API named dataset. The composition is as follows: Models.py ... (models structure details) urls.py ... (URL patterns details) serializer.py ... (Serializer classes defined) views.py ...

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? https://i ...

Ensure to redirect Django users away from the login page if they are already logged in

My goal is to automatically redirect a user from the login page if they are already logged in. This way, once a user has successfully logged in, they will no longer be able to access the login page directly. The login page URL is typically something like ...

Tips for extracting the src attribute from a dynamically generated iframe

My dilemma stems from a function that generates an iframe with content on my website, which unfortunately I cannot control as it is loaded remotely. The function initially creates: <span id="myspan"></span> Once the JavaScript function fu ...

How come the focus doesn't work when altering the CSS code simultaneously?

My attempt at creating a user interface involved an issue where the input field was not visible initially. After clicking the button, the input would appear on the screen, and I wanted to automatically focus on it. This is what I tried to achieve: Initial ...

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

Is it just me, or does floating right not seem to work on 404 pages?

I have been working on setting up a unique header and footer design for a client's website. You can check it out here: Everything is looking good with the social media links floating to the right on all pages, except for some reason on the 404 error ...

Content within this specific div should move in a marquee fashion

#player #title{ left: 90px; width: 200px; overflow: hidden; } Within this specific div (#Title), the text should scroll like a marquee. The challenge is to achieve this effect using only JavaScript without altering the HTML structure. How can this be acco ...

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

Tips for handling numerous buttons in ionic?

I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain ...