[Fixed]-Django | joined path is located outside of the base path component {% static img.thumbnail.url %}, Error 400 with whitenoise

by

2👍

✅

I guess it was a security issue. Even if “whitenoise” is good to serve true static files in production, it can’t serve media files.

I was making a structure error :

# Don't place your 'media' files IN your 'static' file like this :

MEDIA_ROOT = os.path.join(BASE_DIR, 'wt/static/media/')

MEDIA_ROOT never have to be in the “static” file of your project (even if you can make it works in some ways, it’s not a good practice I think).

‘MEDIA’ files (in production), have to serve out of the Django project. I’ve read somewhere that we have to use a CDN. And firstly I choose CloudFlare (because it’s free), but it wasn’t working, cause you need a subdomain/hostname to point your MEDIA_ROOT, and Cloudflare doesn’t give that. Finally, I choose Amazon S3.

So, in conclusion, write something like {% static img.thumbnail.url %} makes no sense. Because everything uploaded via admin/user haven’t to be in “static”.

Use {{ img.thumbnail.url }} instead.

👤LauGau

7👍

Bro, you cant load staticfile when you use images on models, there is 2 different ways to work with images in django.

Statics files is for files that are static(images files like logo of your company, banners, javascript files, css files)

Media Files is for dinamic files like user photo, user gallery, product images

  1. Static Files – This way you use your staticfiles save at your static folder where you place it in static root at your settings.py and then you use {% load staticfiles %} and {% static ” %}
  2. Media Files – This files is that one you save with your models, ImageField, FileField and etc… that one you do not load as static, cuz they are not a static file (you can edit it from your models), that do not means you will save it on your database, this will generate a copy of your file with hashed name on it at you media folder where you place it in media root at your settings.py and media files you use like that {{ ..url }} so in your case gallery.thumbnail.url (btw, remind to call your gallery object at your views and send it to template to allow your to use it)

So the other anwers was right, you need to decide what you want to use, keep in mind that your path localy is different where you deploy, remember to use environment variables with the right path to set up in your settings

Django Docs: https://docs.djangoproject.com/en/1.11/topics/files/

👤Diego Vinícius

0👍

paste the below code in settings.py file

STATIC_URL = '/static/'

# Add these new lines
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = "/media/"

and in urls.py

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
👤Abhijith M

-1👍

Try <img src="{{ img.thumbnail.image.url }}" alt="{{ img.alt}}">

👤FACode

Leave a comment