Django is encountering difficulties locating static files

Currently, I am developing a login page application. The desired layout for the login page can be accessed via the link provided below. This particular login page includes two images and aligns them using CSS along with other resources within Django. When running the Django server, I encounter an issue where the login textboxes and static labels display properly, but the images are not visible, and the alignment seems off. The paths for these images are fetched from either STATIC_URL or STATIC_ROOT in the settings.py file.

Upon running the server, an error is displayed as follows:

[10/Mar/2020 20:18:41] "GET / HTTP/1.1" 302 0
[10/Mar/2020 20:18:41] "GET /login/?next=/ HTTP/1.1" 200 2607
... (more error logs)

This is how my login.html appears:

{% load i18n %}   
{% load admin_static %}{% load firstof from future %}
<!DOCTYPE html>     
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>    
... (html content continued)

The content of settings.py is as shown below:

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

Login Page Image view: https://i.sstatic.net/MKLTW.png

Page what is displayed when Django runs: https://i.sstatic.net/CI8gA.png

Having referenced this solution from Stack Overflow (enter link description here), which did not resolve the issue for me. Kindly assist in identifying any missing components causing images not to show on the login page.

Answer №1

Hello everyone, I managed to fix the problem by adjusting the DEBUG setting to True since it was not yet ready for production and making some modifications locally. Although I'm not entirely sure how it made a difference, enabling DEBUG=True in settings.py did the trick for me.

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

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

Using JQuery in a Vue JS project without npm is not allowed

I'm attempting to include JQuery in my Vue JS project without relying on npm. Here's the approach I'm taking: ***custom-jquery.js*** import '../../public/js/jquery.min.js' export function customFunction(){ $(".element" ...

A guide on accessing a JSON file in Django with React using i18next

Running React build folder within Django leads to an issue where WSGI server uploads translation.json as text/html instead of json. Is there a method to specify this file as json or instruct WSGI server/Django to ignore treating it as json? In i18n.js, ca ...

Troubleshooting issue with jQuery hover fade in and fade out

Upon hovering over the link "NENATKRIVENA TERASA...", a submenu and image simultaneously fade in. The submenu utilizes a downloaded script for fading, while the image above fades using the following code: $(document).ready(function () { $("#slika1").hi ...

What are some ways I can showcase the outcomes of my multiple choice quiz?

I need help with my multiple choice quiz. I want to display the answers under each question and highlight the correct one in bold. Here is the current code: function check() { var question1 = document.quiz.question1.value; var question2 = document.q ...

Value as a String inside an Object

I am encountering an issue with using the obj to store string values in my project. The strings contain commas, and for some reason, it is not working as expected. const resizedUrl ={ 'mobile': "'images','400x/images' ...

Incorporating OpenLayers and TypeScript: Issue with Event.map.forEachFeatureAtPixel, where the argument type is not compatible with the parameter type

I am currently attempting to implement Open Layers v7.2.2 with TypeScript. {When not using TypeScript, the code functions properly} function OnMapClick(event: MapBrowserEvent<UIEvent>) { event.map.forEachFeatureAtPixel(event.pixel, function(curren ...

Position the floating div on top of the div with a vertical scroll bar

I am trying to achieve a scroll effect on a div when the user scrolls down. Below is the HTML code I am working with: <body> <div class="container"> <div class="floaty">Yep</div> content </div> The container has a height of ...

Learn how to dynamically insert input elements into a form upon button click and effectively handle the data processing in Laravel

Currently, I am in the process of developing a straightforward event management platform (similar to Ticketmaster or Eventbrite) using Laravel 5. As part of this project, I am working on creating an event creation page where users can input their event de ...

What is the best way to update the content of a div using a variable within a function in AngularJS?

I have a dilemma with my HTML pages. The index.html page displays product information from a JSON file, and I want the details of a specific product to show up on detail.html when users click on it. Though an alert can display the details, the innerHTML of ...

Implementing a password prompt in CodeIgniter using JavaScript

I need to delete a teacher as an admin, but before doing so, I want to require them to re-enter their password. However, I'm having trouble getting the delete function to work even though the prompt is displayed. Can someone help me figure out what I& ...

Unable to establish the local origin for the OBJMTLLoader element within the scene

I am currently working on a project using Three.js to create a dynamic scene where objects can be manipulated. I have successfully loaded objects using the OBJMTLLoader, but I am facing an issue with their origins. The objects still retain their original o ...

Error: Cannot access property 'tb' of an undefined value

While running the Application, I encountered an error in the declaration of constants.ts file where I was assigning data from a json file to constant variables. In the json file named object.json, I had some data structured like this: { "furniture": { ...

How can I scroll using Javascript programmatically?

Looking for a way to programmatically scroll to a specific tab? Check out the codepen sample tabs I have created. I came across this link on Stack Overflow about continuous vertical scrolling of div content: How to auto-scroll div content vertically conti ...

Automatically Importing in VSCode - A Guide to Enabling Full Path Imports for Material-UI

When utilizing the auto import function in VSCode to bring in Material-UI components, it defaults to a named import from the main file: import { Button } from "@material-ui/core" Nevertheless, I prefer the auto import to be a full path import li ...

Turning a Function Based View into a Class Based View

I am working on incorporating a bootstrap modal for a CreateView and handling JSon responses. I have experience with similar implementations in function based views, but when trying to apply it to Class Based Views (CBV), I run into numerous errors. Each t ...

Steps for adding a border to kendo grid row hover

One of my tasks involved creating a grid using Kendo, and I wanted to display borders on a grid row when the cursor hovers over it. I attempted the following code snippet: .k-grid > table > tbody > tr:hover, .k-grid-content > table > tbody ...

Understanding the Scope of Variables in jQuery.get()

Using jQuery's Ajax for my project, I encountered a scenario where I needed to store the response in global variables: var items = Array() $.get("/data", {"id": 1}, function(data) { for (var i=0; i < data.length; i++) { items[data[i].s ...

Is it possible to display a property in Jade only if it is defined?

I'm sure someone has already addressed this: id="#{data.id}" Result <input id="undefined"> //if the id is not defined Preferred Outcome //If ID is not defined <input> //If ID is defined <input id="someID"> ...

What is the best way to design a tool for Jasmine/Angular that can consolidate multiple beforeEach functions?

I'm having a problem with repeating code in my spec file where I inject a template and then compile it. To keep things DRY, I decided to extract this code into a helper function. However, I think the issue lies in trying to use multiple beforeEach sta ...