Upload image through django admin

Hi everybody,

I am trying to make a blog with Django and I am having trouble with uploading images on the admin interface.

Here is my model:
class Post(models.Model):
title = models.CharField(max_length=200, unique=True)
author = models.ForeignKey(User, on_delete=models.CASCADE, related_name=‘blog_posts’)
content = models.TextField()
image = models.ImageField(default=’’)

So on the admin page, when I create a post, I add the content and I upload an image.

On my html page I have:

{{ object.content | safe }}

{{ object.image }}

But when I go on the page that’s generated thanks to Django, the content appears correctly but not the image (I have the name of the picture and the extension instead).

I understand that I need to request the file that has been uploaded and stored but I did not find how…

Could you please give me some help to understand how to solve that problem?

Thank you


Correct - the image field in the model is not the image. It’s a FileField object containing a reference to an image.

You need to render the image as an image using an <img tag, where the src attribute is the url for the file content itself. Also see the examples at Managing files | Django documentation | Django

Thank you Ken for you answer.

I am still having an issue with the storage…

Here is what I have in my model for the image:

image = models.ImageField(default=’’, upload_to="")

Then on my html file:

img src = "{{ object.image }}

But when I go on the page, I have this error (in Python) and the picture does not load. :

Not Found: /test/PieChart01_fyBMQr8.png
[10/Apr/2022 13:01:21] “GET /test/PieChart01_fyBMQr8.png HTTP/1.1” 404 2503

(test is the name of the article where I want to load the picture)

Could you help me with what I am missing? I probably did not fully understand the Model field reference page you mention…

Thank you

The link I pointed you to is linked to the attribute to be used in the src attribute - .url. That’s what you use instead of .image. The reference to the examples was to show you what the .url attribute is going to generate.

I am sorry but I still don’t understand: I tried but the image does not appear…

Please post the view and the template. We can’t diagnose problems from descriptions of the problem.

Also, when posting code (or templates), enclose that code between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code (or template), then another line of ```.

Ok sorry, this is the template:

{% block content %}

<link rel="stylesheet" type="text/css" href="/static/css/style_post.css" />

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card-body">
        <h1>{% block title %} {{ object.title }} {% endblock title %}</h1>
        <p class="text-muted">{{ post.author }} | {{ post.created_on }}</p>
        <p class="card-text ">{{ object.content | safe }}</p>
        <img src = "{{ object.url }}">

{% endblock content %}  ```

The model:

```from django.db import models
from django.contrib.auth.models import User

    (0, "Draft"),
    (1, "Publish")

class Post(models.Model):
    title = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='blog_posts')
    updated_on = models.DateTimeField(auto_now=True)
    content = models.TextField()
    image = models.ImageField(default='', upload_to="")
    created_on = models.DateTimeField(auto_now_add=True)
    status = models.IntegerField(choices=STATUS, default=0)

    class Meta:
        ordering = ['-created_on']

    def __str__(self):
        return self.title```

And the view:

```from django.views import generic
from .models import Post

class PostList(generic.ListView):
    queryset = Post.objects.filter(status=1).order_by('-created_on')
    template_name = 'index.html'

class PostDetail(generic.DetailView):
    model = Post
    template_name = 'post_detail.html'```

Thanks, that clears a lot of things up.

I didn’t realize you used image as the field name. So yes, you want to get the url attribute of the image field, which means the reference in the template would be object.image.url