0

I want to use static file in my django 2.0.5 template that is located on:

https://my_cloud_front_adress.cloudfront.net/staticfiles/picture_small.jpg

On Heroku i've set varible: 

STATIC_URL = https://my_cloud_front_adress.cloudfront.net/staticfiles/

templates/base.html

{% load static %}

{# this one is NOT working #}
<img src="{% static 'picture_small.jpg' %}" alt="my test image"/>

{# this one is working #}
<img src="https://my_cloud_front_adress.cloudfront.net/staticfiles/picture_small.jpg" alt="my test image"/>

How should i set STATIC_URL to make this work in the template:

<img src="{% static 'picture_small.jpg' %}" alt="my test image"/>
Greg
  • 85
  • 1
  • 3
  • 11
  • What is the rendered src value when you use `{% static ... %}`? To check that, *Right click on image > Inspect*. – xyres May 16 '18 at 18:34
  • When i run this on Heroku i just get Error 500. – Greg May 16 '18 at 21:22
  • Can you turn `DEBUG=TRUE` so you can actually see the error. Or if you have enabled error logging for you app, can you post the error log? – xyres May 16 '18 at 21:30
  • `Page not found (404) Request Method: GET Request URL: http://myexample.com/static/picture_small.jpg Using the URLconf defined in test7.urls, Django tried these URL patterns, in this order: admin/ The current path, static/picture_small.jpg, didn't match any of these.` – Greg May 16 '18 at 22:56
  • That is not a 500 Error. According to this, the value of `STATIC_URL` is set to `'/static/'`. Change this value to your desired value in your settings and everything should work. – xyres May 17 '18 at 08:29

3 Answers3

1

As per django documentation you need to..,

  1. django.contrib.staticfiles add this to INSTALLED_APPS.
  2. add STATIC_URL = '/static/' to your settings.py (I think you forgot to add this.)
  3. Add {% load static %} at the top of your template.
  4. Then use <img src="{% static "my_app/example.jpg" %}" alt="My image"/>
  5. In addition you also need to add STATICFILES_DIRS
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
Nishant Nawarkhede
  • 8,234
  • 12
  • 59
  • 81
  • 1) `django.contrib.staticfiles` is added by default 2) I want to use 'https://my_cloud_front_adress.cloudfront.net/staticfiles/' not 'www.mywebsiteadress.com/static/example.jpg' 3) '{% load static %}' It's allready there – Greg May 16 '18 at 18:04
  • Yes I've set it like this on Heroku varible `STATIC_URL = https://my_cloud_front_adress.cloudfront.net/staticfiles/` – Greg May 16 '18 at 18:12
0

The STATIC_URL value you give will be relative to your app, so adding an external url there doesn't make sense. If you want the files to be locally sourced, you should download them and store them locally in your app in a directory specified in STATICFILES_DIRS, and configure your static files as described in the Django docs.

Otherwise, you can just access the files directly by the url, without trying to treat them as static files in your project.

katyjg
  • 91
  • 4
  • 1
    Adding an external URL does make sense. Django just uses `STATIC_URL` to construct the full URL for your files. It should work regardless of the URL being relative or absolute. In fact, there's an example in the [docs](https://docs.djangoproject.com/en/2.0/ref/settings/#static-url) with an absolute URL. – xyres May 16 '18 at 21:33
  • 1
    That example doesn't refer to an external URL. If you give a full URL in `STATIC_URL` you should serve all your static files there. This has been discussed before [here](https://stackoverflow.com/questions/8687927/django-static-static-url-static-root). – katyjg May 17 '18 at 15:47
  • *`"If you give a full URL in STATIC_URL you should serve all your static files there."`* and the post you linked in your comment just re-affirms what I said earlier - that is you can set `STATIC_URL` to an external url. Thank you for agreeing with me. – xyres May 17 '18 at 17:33
0

user3170828 answer is correct, but to add you can try with django-storages, which will take care of syncing static files to S3/Cloudfront and URL.

Vinay P
  • 617
  • 3
  • 13