如何在 django 的帖子上添加图像？

Question

I want to create an upload image button in django admin post models. When an image is uploaded, will be nice to be displayed on both blog card and then on post detail on the website. Here is my code until now. How should I do this in order to make this work?

Here is my blog.html page

<div class="container">
   <div class="row">
      <!-- Blog Entries Column -->
      <div class="column">
         {% for post in post_list %}
         <div class="card mb-4">
            <div class="card-body">
               <img class="card-image">{{post.header_image}}</img>
               <h2 class="card-title">{{ post.title }}</h2>
               <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
               <p class="card-text">{{post.content|slice:":200"}}</p>
               <a href="{% url 'post_detail' post.pk  %}" class="btn-grey">Află mai multe</a>
            </div>
         </div>
         {% endfor %}
      </div>
   </div>
</div>

Here is my post detail.html

<div class="container">
   <div class="detail-row">
      <div class="card-detail-body">
         <h1> {{ post.title }} </h1>
         <p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
         <p class="card-text ">{{ post.content | safe }}</p>
      </div>
   </div>
</div>

Here is models.py

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

STATUS = ((0,  "Draft"), (1, "Published"))

class Post(models.Model):
    title = models.CharField(max_length=1048)
    slug = models.SlugField(max_length=1048)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='blog_posts')
    related_name=('blog_posts')
    content = models.TextField()
    status = models.IntegerField(choices=STATUS, default=0)
    created_on = models.DateTimeField(auto_now_add=True)
    
    def __str__(self):
        return self.title

And here are views.py

def blogPage(request):
    floaterForm = FloaterForm()
    post_list = Post.objects.all().order_by('-created_on')
    context = {
        'flForm' : floaterForm,
        "post_list": post_list
    }
    return render(request, "blog.html", context)

def post_detail(request, pk):
    post= Post.objects.get(pk=pk)
    context = {
        'post' : post
    }
    return render(request, "post_detail.html", context)

Answer 1

You've to create one field inside your models.py file like this

image = models.ImageField(upload_to="your_upload_dir_name")

then you've to set your media configuration now you can access your image inside your template like this

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

Answer 2

You firstly have to create the image field in Django. For example

blog_image = models.ImageField(upload_to="/media/blog_images")
#This /image/blog_images is the image directory.

It will save the image URL in the model field. Then you can use this image URL in the src of the image tag.

The html code should be like this.

<form method = "post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Upload</button>
</form>

And in the views, your code will be like this. You can change it according to your configuration.

if request.method == 'POST':
    form = BlogsForm(request.POST, request.FILES)
    if form.is_valid():
         form.save()

Then you have to set the media configuration in your server configuration and in settings.py. I mostly use Nginx, so I do this.

#settings.py
MEDIA_ROOT =  BASE_DIR / 'media'
MEDIA_URL = '/media/'

#ngnix
location /media {
    autoindex on;
    alias /path to media directory of project;
}

If still you got confuse, tell me in the comments. Thanks