Search code examples
djangoimagedjango-templatesdjango-settings

Django Template Image not displaying even with media url and media root

Static images are showing properly. The files in the media folder are not displaying in html. I tried setting up media_url in various ways but in vain. I uploaded the image via django admin panel. The name of product is showing fine. The img.url shows /media/p2.jpg

models.py

class Product(models.Model):
    name = CharField(("Name"),max_length=256,blank=False)
    title_img = models.ImageField(null=True, blank=True)

settings.py

PROJECT_ROOT = (os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT  =   os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(PROJECT_ROOT), "media_root")

urls.py

urlpatterns = [
        path('', ProductList.as_view() , name="product"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

template.html

{{p.name}}
<img src="{{p.title_img.url}}">

the name is displayed while image is not displayed. In console, I get

"GET /media/p2.jpg HTTP/1.1" 404 2690
Solution

  • I changed some settings and was able to resolve it. Probably the mistake was that I was changing project_root/products/urls.py instead or project_root/urls.py. Overall changes I did:

    In main urls.py, added these

    urlpatterns = [
        path('', ProductList.as_view() , name="product"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

    Changed settings.py

    MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'media/')
MEDIA_URL = '/media/'