[Django]-Images from ImageField in Django don't load in template

by

36👍

✅

I have a clue on what’s the problem. MEDIA_URL should be like this:

MEDIA_ROOT='<the full path to your media folder>' (i.e: '/home/ike/project/media/')
MEDIA_URL='/media/'

Note the slash character at the beginning. That is because media is a folder in your root server folder and not relative to whatever other url you call it.

And add these lines to the end of your urls.py file:

# You might need to import static function like this:
#from django.contrib.staticfiles.urls import static

urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

You can check the following documentation: https://docs.djangoproject.com/en/dev/howto/static-files

Hope this helps

👤Paulo Bu

5👍

If you’re using the dev server then you need to add something to your urls.py to make django serve the media files, cf:

1.4.x : https://docs.djangoproject.com/en/1.4/howto/static-files/#serving-other-directories
1.5.x: https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user

👤bruno desthuilliers

3👍

Check in your settings.py you have define MEDIA_ROOT and ‘MEDIA_URL’ (and they are correct). The MEDIA_ROOT specifies an absolute folder on your machine where media will be stored.

So for an example:

MEDIA_ROOT = '/myfolder/'

This would mean it would look for image at:

/myfolder/images/albums/

Next in your settings.py check your MEDIA_ROOT location: i.e.

MEDIA_URL = 'http://localhost/myfolder/'

So your images:

<img src="{{ MEDIA_URL }}{{ image.image.url }}" height="420"></a>

This would relate to:

http://localhost/myfolder/images/albums/

Hope this helps.

👤Glyn Jackson

2👍

Source: https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user

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

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

you need to add to url pattern to serve uploaded files

👤Saher Ahwal

1👍

Within your details.html, change your 

img src="{{ image.image.url }}" height="420"

To 

img src="your_app/media/{{ image.image.url }}" height="420"

I hope this helps. If not I will be glad to provide more details.

👤Amimo Benja

1👍

Well I know this question is old but I solved it right now after prove all options:

  1. settings.py:
    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  1. urls.py DANGER!!! Here one of my errors was that I used my_app/urls.py… If you want to use my_app/urls.py you need to add “/namespace_name{{ image.image.url }}” to img’ src:
    from django.conf.urls.static import static
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    from django.conf import settings

    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  1. Your template, detail.html
    img src="{{ image.image.url }}" alt="{{ image.title }}"

NOTES:
Yo don’t need MEDIA_URL, be careful with the ‘/’ because image.image.url is absolute, so if you use a namespace then you don’t need to add the finish slash.

    img src="/namespace_name/{{ image.image.url }}"  --> BAD!!!
    img src="/namescape_name{{ image.image.url }}"   --> GOOD!!!
👤Leaf

0👍

I took a little from each of the answers above. I was having the same problem as you. I was getting returns that were being directed from the current /blog/post/(media_url)/image.jpg

In my admin portal I could view it easily and edit it. But on my post.html I was having problems until I added the {{ MEDIA_URL }} —

That is all that I was missing.

I posted my entire section below so that other people could read it and see what they are missing. 

post.html:

    <label for="id_image">  <img src="{{ MEDIA_URL }}{{ p.image.url }}" 
    title="{{ p.title }}"> </label>

models.py:

    from django.core.files.storage import FileSystemStorage

    upload_location =
    FileSystemStorage(location='/home/pi/djcode/xpcpro/xpcpro/images')

    class Blog(models.Model):
        title = models.CharField(max_length=255)
        author = models.ForeignKey(settings.AUTH_USER_MODEL, default=1)
        date = models.DateTimeField(auto_now=False, auto_now_add=True)
        body = models.TextField()
        image = models.ImageField(
            storage=upload_location, null=True,
            blank=True, width_field="width_field",
            height_field="height_field",)
        height_field = models.IntegerField(default=0)
        width_field = models.IntegerField(default=0)

urls.py:

    from django.conf.urls.static import static
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns

    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static(settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT)

settings.py:

    MEDIA_ROOT = "/home/pi/djcode/xpcpro/xpcpro/images/"
    MEDIA_URL = "/images/"
👤jMrL

Leave a comment