How to load images in assets folder, wile running Angular in Django Framework?

Question

I am trying to run Angular 6 app inside Django 2.1. I am able to run the app and getting the webpage. But, all the images in assets folder, are not rendering in the UI. it is returning as 404 Not Found.

My index.html is like this below

{% load staticfiles %}
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>testApp</title>
<base href="/">

<link rel="stylesheet" href="{% static 'assets/bootstrap.min.css' %}">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href=" http://www.dafont.com/bebas-kai.font" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="{% static 'assets/bootstrap.min.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="{% static 'styles.840582ccf500d5b2f900.css' %}"></head>

<body>
<app-root></app-root>
 <script type="text/javascript" src="{% static 'runtime.a66f828dca56eeb90e02.js' %}"></script>
 <script type="text/javascript" src="{% static 'polyfills.d391358819e34c4d58a8.js' %}"></script>
 <script type="text/javascript" src="{% static 'main.ebdb44550f1a4dd60a03.js' %}"></script>

</html>

The settings.py goes like this

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = '***********************************'

DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'first'
 ]

MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  'django.contrib.sessions.middleware.SessionMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'helloapp.urls'

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
      },
  },
]

WSGI_APPLICATION = 'helloapp.wsgi.application'

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
   'default': {
    'ENGINE': 'django.db.backends.sqlite3',
    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 }
}


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password- 
validators

AUTH_PASSWORD_VALIDATORS = [
{
    'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

So am i missing something or doing something wrong?

@Hybrid i have updated my question with settings.py. Kindly check it. — BlizZard, Mar 26 '19 at 16:35
@RamyMohamed yes , script and styles are loading. And am able to see whole of UI. But all images are missing — BlizZard, Mar 26 '19 at 16:41
Did you add `urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)` and `urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)` to the end of your root `urls.py` — Hybrid, Mar 26 '19 at 16:45

score 2 · Accepted Answer · answered Mar 26 '19 at 16:43

In settings.py you specify your static files are in static directory

STATIC_URL = '/static/'

And the browser error log shows that you're trying to request images without the static part of the path being added.

So, files need to start by /static/

Ex:

/static/assets/imgs/huge_logo.jpg

How to load images in assets folder, wile running Angular in Django Framework?

1 Answers1