Images are not found/loading correctly - 404

Question

I am using the Oscar-Django e-commerce project, and I am following the tutorial Frobshop

The website is up and running, however, when I add a product -from the admin dashboard- and upload a picture, the thumbnail isn't loading, and when I view the product on the customer view, the picture is missing.

Here is my configuration in the settings.py file:

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = location("public/media")
STATIC_ROOT = location('public/static')

When I view the product from the customer view, the terminal is showing the 404 GET

"GET /media/cache/45/ec/45ecfa8787510d3ed6997925b6e26ed7.jpg HTTP/1.1" 404 4880

here is what it looks like

When I go to the admin section of the site and try to click on the picture from the product table, it shows "Page not found" as well, the URL this time is

http://127.0.0.1:8000/media/images/products/2017/09/hoodie1.jpeg

When I browse to the specific product (still on the admin site), then the image section of this product, the thumbnail isn't displayed and the terminal shows this

"GET /media/cache/cd/8a/cd8af791d513ec91a583b0733070d9a7.jpg HTTP/1.1" 404 4880

Here are the patterns from URLs.py

urlpatterns = [ url(r'^i18n/', include('django.conf.urls.i18n')),

# The Django admin is not officially supported; expect breakage.
# Nonetheless, it's often useful for debugging.
url(r'^admin/', include(admin.site.urls)),

url(r'', include(application.urls)), ]

I see the picture under this path in the Finder

/frobshop/frobshop/public/media/images/products/2017/09

Any help in figuring this out is appreciated!

Thank you!

Answer 1

You will need to add the following the bottom of your urls.py:

from django.conf import settings
if settings.DEBUG:
    from django.conf.urls.static import static
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    # Serve static and media files from development server
    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

This is limited to when settings.DEBUG==True as in production you will want to serve static and media using nginx or an equivalent.

This isn't something covered in the Oscar documentation as it is a Django level concern, but it should probably be mentioned.