Django static files not working in localhost-CodePudding

I have my Django app running on a development server. The HTML templates are serving fine but I'm really having a lot of trouble getting the static files to serve. I've tried lots of ideas from Stack Overflow but not getting anywhere.

I just get a 404 error on the image.

Can anyone help me please?

My urls.py is:

from django.contrib import admin
from django.urls import path
from app import views
from django.contrib.auth import views as auth_views
from django.conf.urls.static import static
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# The rest of my urls here...

urlpatterns = [
    path('', views.index, name='index'),
    path('admin/', admin.site.urls),
]   static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

my settings has included:

STATIC_ROOT = "/home/me/django-test/djangoproject/static"
STATIC_URL = 'static/'

and my template has:

<!doctype html>
{% load static %}
<img src="{% static 'e.png'%}">

CodePudding user response：

It worked for me in django 3.2. For local static you should create folder called "static" in your config folder config it's folder created when you start project(may be you call it mysite or smth):

django-admin startproject config

create a "static" folder in the same folder where you have the file settings.py

#In settings.py:

STATIC_URL = '/static/'

# folder for static when you deploy your project on server(not for local develop)
STATIC_ROOT =  os.path.join(BASE_DIR, 'static')

# local (in config for runserver)
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, "config/static"),
]

Inside folder "static" place your css, js, img e.t.c folders

In our templates you have to do something like this:

<!DOCTYPE html>
{% load static %}
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css_custom/base_style.css' %}"/>


    <title>{% block title %}TITLE{% endblock title %}</title>
    
</head>

Pay attention to my template tag

href="{% static 'css_custom/base_style.css' %}"

that means i load static from:

config/static/css_custom/base_style.css

Same thing for load image, in you template.html:

{% extends '_base.html' %}
{% load static %}
{% block content %}
<img src="{% static 'images/Bg.jpg' %}" alt="">
{% endblock content %}

that means static from:

config/static/images/Bg.jpg

or you can add relative path into your style.css for some classes like:

  .header-home {
    height: 40vh;
    background-image: url("../images/Bg.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
  }

Hope it helps you