Как добавить изображение в пост в django?

Я хочу создать кнопку загрузки изображения в моделях постов в админке django. Когда изображение будет загружено, оно будет отображаться в карточке блога, а затем в деталях поста на сайте. Вот мой код до сих пор. Как мне сделать, чтобы это работало?

Вот страница моего блога.html

     <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>

Вот мой пост 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>

Вот 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

А вот 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)

Вы должны создать одно поле в файле models.py следующим образом

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

затем вы должны установить вашу media configuration теперь вы можете получить доступ к вашему изображению внутри вашего шаблона следующим образом

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

Сначала вам нужно создать поле изображения в Django. Например

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

Это сохранит URL изображения в поле модели. Затем вы сможете использовать URL этого изображения в src тега image.

Код html должен быть таким.

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

А в представлениях ваш код будет выглядеть следующим образом. Вы можете изменить его в соответствии с вашей конфигурацией.

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

Затем вам нужно установить конфигурацию медиа в конфигурации вашего сервера и в settings.py. Я в основном использую Nginx, поэтому я делаю это.

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

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

Если вы все еще запутались, расскажите мне об этом в комментариях. Спасибо

Вернуться на верх