Troubleshooting: Issue with Background Image Visibility in Django

Having trouble with the Polls Webapp tutorial in Django. I keep getting a 404 error when running commands in my terminal, and my image icon is showing up but not the image itself.

I've attempted adjusting the file path multiple times, resetting the static migration, and modifying my static root without success.

Check out my style.css below:

li a {
    color: green;
}

body {
    background-image: url('static/images/background.png') no-repeat;
}

Take a look at my index.html:

{% if latest_question_list %}
    <ul>
        {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a>
        </li>
    {% endfor %}
</ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

<img src="{% static 'static/images/background.png' %}" alt="My Image">

Here are some snippets from my settings.py file:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'


MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Any suggestions on what might be causing this issue?

Answer №1

  1. It is recommended to include :link and/or :visited in the selector for anchor tags.
  2. Ensure to include a forward slash (/) at the beginning of the url value for the property background-image.
li a:link,
li a:visited {
    color: green;
}

body {
    background-image: url('/static/images/background.png') no-repeat;
}
  1. Remove static/ from the img src.
{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

<img src="{% static 'images/background.png' %}" alt="My Image">

{% if latest_question_list %}
    <ul>
        {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a>
        </li>
    {% endfor %}
</ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}
  1. Eliminate the forward slash (/) from STATIC_URL and incorporate STATICFILES_DIRS in settings.py

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')
STATIC_ROOT = os.path.join(BASE_DIR, 'media')
  1. Verify that you have updated urlpatterns in urls.py

<project_name>/urls.py:

from django.contrib import admin
from django.urls import path, include

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

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

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

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

Adjust the z-index of the div to control the overflow scrollbar

I am facing an issue with a div that has a horizontal scrollbar and an image (or another div) positioned over the entire page using absolute positioning. The problem is I wish to scroll the div that is beside the image. For anchor links (a), I have set the ...

The Bootstrap 5 mega menu vanishes in the blink of an eye

Having some trouble with my Bootstrap 5 mega dropdown. It seems to disappear too quickly when I try to select the contents. I suspect there may be some CSS causing this issue, but I can't seem to pinpoint it. I've already attempted to adjust the ...

Transferring a variable from a .jsp file to a .js file

I'm currently working on a .jsp page where the appearance of a different div from a .js file depends on the header that comes from a request. I've added a second header and now want if (info.getLightHeader()!=null) the <div id="lightHeader ...

Select a specific item from an array and reveal the corresponding item at the matching index in a separate array

I'm working on a project where I have a list of elements that are displayed using a ng-repeat and I am using ng-click to retrieve the index of the element in the array that I clicked on. Here is the HTML code snippet: <ul> <li ng-repeat=" ...

Steps for creating a duplicate of a chosen item in a dropdown menu

Is there a way to specifically select an item from a drop-down menu and duplicate it within the same list? I've come across several solutions where instead of cloning the selected item only, the entire list gets duplicated. For example: function Cop ...

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

The red border highlighting Chrome's input

I want to apply the css style border-color: red; to input elements. But I notice that their dimensions change compared to the default chrome border. You can view the example on jsfiddle: http://jsfiddle.net/79QkJ/2/ In the example, you'll see ...

Utilizing Django formset to allow for uploading multiple images with multiple input fields

I'm currently working on a project to develop a straightforward form for sharing posts, similar to the one shown in this example. https://i.sstatic.net/ICqPg.png My approach involves using a formset for uploading images. However, this method present ...

Retrieving data from a dynamic identifier

When testing the sort order of search results, I encountered an issue with one specific search. The problem lies in the auto-generated ID for each row, which changes every time the search is performed. For example, I can use the following code snippet: s ...

Why are my subpages not appearing when using nodejs?

Currently, I'm in the process of creating a basic node app for my website. So far, I have set up my app.js, controllers, and routers. However, I am encountering an issue where two out of three subpages return a 404 error, while the index page works ...

Access the download or view link for the document

I am working with a list of documents from my models, and one of the fields includes a path to the URL. I want to create a button that will open the file when clicked, but I have been unsuccessful in my attempts so far. Any suggestions would be appreciated ...

Is there a way to change a DWG file into a Flash (SWF) file?

Looking for a way to convert DWG and DXF files into SWF format directly from the client's browser. These files are currently stored on the server, and the converted file will also be saved there. I have searched for software options but haven't ...

The property 'touched' is not recognized on this type of 'HTMLInputElement'

<input id="fileTitleVar" type="text" #fileTitleVar> <span *ngIf="fileTitleVar.touched && fileTitleVar.blurred"> Input has been touched </span> I am encountering the following errors: "Property 'touched' d ...

Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side. I'm looking for a way to make the submenu appear on the left side o ...

What steps should I take to troubleshoot and fix the issue of data insertion errors in

https://i.sstatic.net/VccFk.jpg I am encountering an issue with a PHP form that is supposed to transfer information to a database after submission. However, every time I press the submit button, I receive an error message. Can anyone help troubleshoot th ...

The server sends a Status=304 response to one browser's GET request, while providing a 200 response to another browser's request

My focus right now is on troubleshooting my .htaccess file, in which I have the following code: <FilesMatch "\.(html|swf)$"> <IfModule mod_headers.c> Header set Cache-Control "no-cache, public" </IfModule&g ...

What is the best way to conduct a comparison between text within an HTML element and a particular value contained in an array of objects

My first attempt at creating a quiz app using JavaScript has hit a roadblock. I am facing an issue with calculating the user's score based on their selected answers and the correct ones. The userScore variable is not incrementing as expected, always s ...

Querying JSON Fields in Django

My model includes a JSONField that stores various types of data as shown below: [ { "name":"Name A", "type":"Type1", "class_type":"Class A" }, { "name":"Name B", "type":"Type1", "class_type":"Class A" }, ...

Challenges Encountered When Passing Data from Template to View Using Django URL Dispatch

Encountering an error when trying to dispatch two variables from my template to my view using URL dispatching. Unsure why the URL is not being found. It seems like there might be an issue in the code snippet below. This pertains to an application within my ...

Hidden items with horizontal overflow will appear when clicking on the page and dragging to the right

I have two graphics displayed on either side of my page content. As the browser/page width decreases, these items get cropped off the screen to create more space for the content. While this setup is working fine, .page { height: 100%; min-height: ...