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
Emmanuel
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
Emmanuel
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 }}">
</div>
</div>
</div>
</div>
{% endblock content %} ```
The model:
```from django.db import models
from django.contrib.auth.models import User
STATUS = (
(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