django angular load static files - image in assets folder get 404

Question

i have a assets/image folder in angular src folder and i left all of my images there, i have many component and child component that are using that images like <img src"../../../assets/image/test.png">,

i build my angular app and place all files to static folder , in nginx i point it to load from static folder and in django in template i used index.html to load the static files like below: now my app will run but no file that have address like "../../../file" in angular load all get 404 like this :

http://hello.com/bird.65c8b9bce67b6a965a9c.png (error 404)

if i put a static keyword front of address it like http://hello.com/static/bird.65c8b9bce67b6a965a9c.png image will load .. how can i handle this issue?

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> site </title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
<link rel="stylesheet" href="{% static 'styles.921a613cd46f44e0d5a0.css' %}"></head>
<body>
  <app-root>Loading .  .  .</app-root>
<script type="text/javascript" src="{% static 'runtime.6afe30102d8fe7337431.js' %}"></script>
<script type="text/javascript" src="{% static 'polyfills.b0205464c9bd4e7fe3b3.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts.59ed76cc23ba77b0ec72.js' %}"></script>
<script type="text/javascript" src="{% static 'main.08947dd689f13d4027ea.js' %}"></script>
</body>
</html>

also i aleady added

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

to end of my urls.py and i run python manage.py collectstatic

nginx server:

server {
    listen 80;
    server_name hello.com;
    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/vertical/academy;
    }

    location / {
        include proxy_params;
       #proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://unix:/home/vertical/academy/academy.sock;
    }
}

score 2 · Accepted Answer · answered Oct 02 '19 at 19:50

Your problem is that Angular is pointing the resources to Django's root.

You need to specify resourcesOutputPath parameter to ng bulid command:

ng build --output-path /path-to-django-app/static --resources-output-path static

So it will point to http://hello.com/static/bird.65c8b9bce67b6a965a9c.png intead of http://hello.com/bird.65c8b9bce67b6a965a9c.png

Note that resources output path is relative to output path.

See the Options section here: https://angular.io/cli/build

senox13 · Answer 2 · 2018-07-19T17:14:57.387

It seems like you're asking what to do about the expected behavior of Django with static files. The reason you get a 404 error for the file at http://hello.com/bird.65c8b9bce67b6a965a9c.png is because that file does not exist at that URL. Django serves all static files from the /static/ subdomain, or a differently-named subdomain that you can define with STATIC_URL in your settings.py.

Here is the relevant documentation: https://docs.djangoproject.com/en/2.0/howto/static-files/

score 0 · Answer 3 · answered Mar 25 '19 at 22:26

Best solution would be to pass the static folder url in the window object, access it via typescript. Create a service for window object. That way you can easily access the data in any component in the app.

Also, do not add the hash value in the html file (for css and js) since that is bound to change. Use hashing false in the bundler config.

score 0 · Answer 4 · answered Apr 30 '20 at 13:42

One solution is to use the environment variables of Angular.

In your angular app under src/environments are two typescript files environment.ts and environment.prod.ts. You can define variables in these files which differ from the development environment to the production environment.

So you can add image sources as typescript strings like

<img [src]="imageURL" alt="my_image">

and define imageURL in your TS file as

//environments/environment is replaced with environments/environment.prod on ng build --prod
import { environment } from '../../environments/environment'

//staticURL is '' in environment.ts and '/static/' in environment.prod.ts
imageURL = environment.staticURL + 'assets/images/myimage.png'

You can learn more about environment variables here

score 0 · Answer 5 · edited Mar 18 '22 at 23:28

I had the same problem with Angular and Django. My fixable solution was the one that @Devesh Pradhan provided.

export const environment = {
  production: true,<br>
// Custom path in my exemple.<br>
  djangoStaticpath: '/static/angular/images/'
};

So I've defined a path for the production env, while on the develpment env is just a empty string. And the second trick was to add the background images in html using Angular style bindings.

"<div [style.background-image]="'url(' + imgSrc + 'test.png)'"></div>"

Here imgSrc is the djangoStaticpath value imported in the component.ts.

django angular load static files - image in assets folder get 404

5 Answers5