How do I upload a picture to my blog using the Django administration

Question

I'm a complete beginner in Django, now after reading some articles I've managed to build a blog in Django where I can post (all through the Django administration). However, I also wanted to be able to add an image to my post, so I created an image field in my model, now it is also possible to upload images through the Django administration, these are then stored in the media/images folder. However, until now (after reading some articles) I haven't managed to display these pictures in my blog posts.

Please excuse the probably a little stupid question and thanks a lot for the help

Bennet

My models.py file

from django.db import models

# Create your models here.

class Post(models.Model):
    title = models.CharField(max_length= 255)
    slug = models.SlugField()
    intro = models.TextField()
    body = models.TextField()
    image = models.ImageField(upload_to='images/')
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title


    class Meta:
        ordering = ['-date_added']

the page where I want to display the image

{% block content %}


<div class="section title is-size-5 has-text-centered">
    <div class="title">{{post.title}}</div>
    <div class="subtitle">{{post.date_added}}</div>
</div>
<div class="container">
    <div class="columns">
        <div class="column is-8 is-offset-2">
    
            <div class="blob">
                <img src="{{post.image}}" alt="">
                {{post.body}}
            </div>
        </div>
    </div>
</div>


{% endblock content %}

1) Have you set the `MEDIA_URL` in your settings file? See https://docs.djangoproject.com/en/4.2/ref/settings/#media-url 2) Have you tried using `post.image.url` to get the image URL? See https://stackoverflow.com/questions/15764587/django-get-imagefield-url-in-view — Nick ODell, Jun 26 '23 at 16:34
Thanks a lot for that tip! I already set the MEDIA_URL to "/media/", now I also tried to get the image URL, and now it shows me the image URL when I inspect the page in the Chrome developer tools, but the image isn't displayed on the page. Instead, chrome displays the image not found icon. — Bennet Weber, Jun 26 '23 at 16:54
If you right click the image on the page -> open image in new tab, does Django give you an error? If so, what error? — Nick ODell, Jun 26 '23 at 16:57
Yes, Django gives me an error404 and says that the URLconf defined in my urls.py file do not match the current path: — Bennet Weber, Jun 26 '23 at 17:00
Using the URLconf defined in bennetsthougts.urls, Django tried these URL patterns, in this order: [name='home'] [name='frontpage'] / [name='post_detail'] admin/ about [name='aboutme'] The current path, media/images/85461a.jpg, didn’t match any of these. — Bennet Weber, Jun 26 '23 at 17:01
Does this question help? https://stackoverflow.com/questions/36280056/page-not-found-404-django-media-files — Nick ODell, Jun 26 '23 at 17:02
Yes, it helped a lot, I just follow the exact instructions from the solution and now it works perfectly fine. Thank you so much for your help:) — Bennet Weber, Jun 26 '23 at 17:09

score 0 · Accepted Answer · answered Jun 27 '23 at 09:39

In settings.py, add the followings:

MEDIA_ROOT = BASE_DIR/'media'
MEDIA_URL = '/media/'

In urls.py of project file (root file), add the urlpatterns as followings:

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

urlpatterns = [

    ## Your other routes go here ##

    re_path(r'^media/(?P<path>.*)$', serve,
        {'document_root': settings.MEDIA_ROOT}),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

And in your templates,

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

How do I upload a picture to my blog using the Django administration

1 Answers1