images from media file wont get displayed in django template

Question

I'm new to django and I've been playing around with uploading pictures then displaying them. ... well trying to display them.

Whenever I try to display the image from a template, I just get the broken image link icon.

I'm using the sqlite3 server

settings.py

ROOT_DIR = os.path.dirname(os.path.dirname(__file__))
def location(f):
    return os.path.join(ROOT_DIR, f)
MEDIA_URL = 'http://127.0.0.1:8000/media/'
MEDIA_ROOT = location('media/')

models.py

class Image(models.Model):
    image = models.ImageField(upload_to = 'images/')

views.py

from imageupload.settings import MEDIA_ROOT, MEDIA_URL

def main(request):
    imgs = Image.objects.all()
    return render_to_response('index.html', {'images': imgs, 'media_root': MEDIA_ROOT, 'media_url': MEDIA_URL})

url.py

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

Right now I've just used the admin to upload images. And that seems to work fine, they go to where I expect

But when I try to display them:
template

<!DOCTYPE html>
<html>
    <img src="<correct path to project>/media/images/photo_1.JPG" />

    {% for img in images %}
    <img src="{{ media_root }}{{ img.image.name }}" />
    <img src="{{ media_url }}{{ img.image.name }}" />
    <img src="{{ img.image.url }}" />
    {% endfor %}
</html>

I get the broken icon for each one.
The browser source code shows me:

<!DOCTYPE html>
<html>
    <img src="<correct path to project>/media/images/photo_1.JPG" />    
    <img src="<correct path to project>/media/images/photo_1.JPG" />    
    <img src="http://127.0.0.1:8000/media/images/photo_1.JPG" />
    <img src="http://127.0.0.1:8000/media/images/photo_1.JPG" />
</html>

that makes sense, I only have one photo uploaded.
and if I copy one of the hard links and put it into some other html file ...it works

You can use {% get_media_prefix %} to get MEDIA_URL. Ref: https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#get-media-prefix — Bhargav Prajapati, Jun 20 '22 at 04:27

Ben · Accepted Answer · 2015-01-15T04:42:38.827

39

Oh FFS....

aperently it's

MEDIA_URL = '/media/'

NOT

MEDIA_URL = 'http://127.0.0.1:8000/media/'

...despite #'http://127.0.0.1:8000/media/' being written right next to it

working img link looks like so:

<img src="/media/images/photo_1.JPG" />

you definitely need the:

static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

in the url file also

edited Jan 15 '15 at 04:42

answered May 28 '12 at 05:57

Ben

6,986
6
44
71

this is my first time seeing someone saying "FFS" on stackoverflow. I think it's contrary to the atmosphere of SO – Hammad Feb 03 '22 at 11:06

score 13 · Answer 2 · answered Dec 10 '19 at 05:50

For me, I did the following two things:

Define media url in the settings.py

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

and then in the project's urls.py, defined serving url for development and production purpose:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('django_app.urls')),
]
# Serving the media files in development mode
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
else:
    urlpatterns += staticfiles_urlpatterns()

then you can reference the image in the media folder in the template like this:

<img src="media/path_to_image" />

Note: Don't forget to set the DEBUG flag to False in the settings.py for production.

score 3 · Answer 3 · answered May 27 '12 at 21:23

if you are looking for display images in development environment try this:

settings.py

SITE_ROOT = os.path.realpath(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(SITE_ROOT, 'static')
MEDIA_URL = '/static/'
STATIC_ROOT = os.path.join(SITE_ROOT, 'statics')
STATIC_URL = '/statics/'

urls.py

# somebody import this from settings
SITE_ROOT = os.path.realpath(os.path.dirname(__file__))  
urlpatterns += patterns('', 
    url(r'^static/(?P<path>.*)$','django.views.static.serve',
        {'document_root': os.path.join(SITE_ROOT, 'static')})
)

html view file *.html:

<img src="{{ MEDIA_URL }}img/content_top_edit_form.png">

this means we have a img folder in static folder. in your case you can change this by

if you see your browser html must be seen like this:

<img src="/static/img/content_top_edit_form.png">

hey thanks for your response. I tried it and it still doesn't seem to work though — Ben, May 28 '12 at 05:45

score 0 · Answer 4 · answered Sep 09 '21 at 23:09

0

in the template use {{img.image.name.url}}

answered Sep 09 '21 at 23:09

Jose Galarza

21
1

images from media file wont get displayed in django template

4 Answers4

Linked