Медиафайлы, загруженные пользователем, не отображаются

Использую django для рендеринга загруженных пользователем данных с веб-страницы с формой "/blogs/createblog" на веб-страницу "/blogs", но файл изображения, загруженный пользователем, не отображается на странице его/ее записи в блоге ("/blogs"). Мои settings.py, base level/urls.py, app/models.py, app/views.py и html шаблоны выглядят примерно так:

settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

baseproject/urls.py

from django.contrib import admin
from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
from django.urls import re_path
from django.views.static import serve


urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('home.urls')),
    path('blogs/',include('blog.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

app/models.py

from django.db import models
from django.utils.timezone import now
from django.contrib.auth.models import User

# Create your models here.
class BlogPost(models.Model):
    blog_id=models.AutoField(primary_key=True)
    author=models.CharField(max_length=200)
    title=models.CharField(max_length=300)
    pub_date=models.DateField()
    category=models.CharField(max_length=200,default="Promotional Blogs")
    heading1=models.CharField(max_length=300,blank=True)
    content1=models.TextField(blank=True)
    heading2=models.CharField(max_length=300)
    content2=models.TextField()
    about=models.TextField()
    likes=models.ManyToManyField(User, related_name="blogpost_like")
    image=models.ImageField(upload_to="blog/images")

    def number_of_likes(self):
        return self.likes.count()

    def __str__(self):
        return self.title + " by " + self.author

app/views.py

def createblog(request):
    if request.method=="POST":
        author=request.POST.get("author")
        title=request.POST.get("title")
        today=date.today()
        category=request.POST.get("category")
        heading=request.POST.get("heading")
        body=request.POST.get("body")
        about=request.POST.get("about")
        pic=request.POST.get("pic")   
        new_post=BlogPost(author=author,title=title,pub_date=today,category=category,heading2=heading,content2=body,about=about,image=pic)
        new_post.save()
        messages.success(request,"Your blog is published successfully.")
        return redirect("/blogs")
    return render(request,"blog/editor.html")

app/editor.html

{% extends 'blog/basic.html' %}
{% block title %}Editor - BlogLikho{% endblock %}
{% block body %}
  <div class="container my-4">
  <h1 class="mb-4" style="text-align:center;">Blog Editor</h1>
  <form method="POST" action="/blogs/createblog">{% csrf_token %}
  <div class="row">
  <div class="mb-3 col-md-6">
  <label for="author" class="form-label" style="font-weight: bold;">Author</label>
  <input type="text" class="form-control" id="author" name="author" placeholder="" required>
</div>
<div class="mb-3 col-md-6">
  <label for="title" class="form-label" style="font-weight: bold;">Title</label>
  <input type="text" class="form-control" id="title" name="title" placeholder="Blog title" required>
</div>
</div>
<div class="mb-3">
  <label for="category" class="form-label" style="font-weight: bold;">Category</label>
  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="Coding Blogs">Coding Blogs</option>
    <option value="Sports Blogs">Sports Blogs</option>
    <option value="Traveling Blogs">Traveling Blogs</option>
    <option value="Educational Blogs">Educational Blogs</option>
    <option value="Business Blogs">Business Blogs</option>
    <option value="Marketing Blogs">Marketing Blogs</option>
    <option value="Technology Blogs">Technology Blogs</option>
    <option value="Sales Blogs">Sales Blogs</option>
  </select>
  <input type="hidden" name="category" value="Coding Blogs">
</div>
<div class="mb-3">
  <label for="heading" class="form-label" style="font-weight: bold;">Heading</label>
  <input type="text" class="form-control" id="heading" name="heading" placeholder="" required>
</div>
<div class="mb-3">
  <label for="body" class="form-label" style="font-weight: bold;">Body</label>
  <textarea class="form-control" id="body" name="body" rows="4" required></textarea>
</div>
<div class="mb-3">
  <label for="about" class="form-label" style="font-weight: bold;">About you</label>
  <textarea class="form-control" id="about" rows="3" name="about" placeholder="Write a bit about yourself" required></textarea>
</div>
<div class="mb-3">
  <label for="pic" class="form-label" style="font-weight: bold;">Blog display image</label>
  <input class="form-control" type="file" id="pic" name="pic">
</div>
<button type="submit" class="publish btn btn-success">Publish</button>
</form>
  </div>
{% endblock %}

app/yourblogs.html

{% extends "blog/basic.html" %}
{% block activeblogs %}active{% endblock %}
{% block title %}Blogs - BlogLikho{% endblock %}
{% load static %}
{% block body %}
<div class="container my-4">
<div class="row mb-2">
{% for blog_item in myblogs %}
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-success">{{blog_item.author}}</strong>
          <h4 class="mb-0">{{blog_item.title | truncatechars:25 }}</h4>
          <div class="mb-1 text-muted">{{blog_item.pub_date}}</div>
          <p class="card-text mb-auto" style="margin-bottom: revert!important;">{{blog_item.content1 | truncatewords:10}}</p>
          <button type="button" class="btn btn-primary" style="width: fit-content;"><a href="/blogs/blogpost/{{blog_item.blog_id}}" class="stretched-link" style="text-decoration:none; color:white;">Continue reading</a></button>
        </div>
        <div class="col-auto d-none d-lg-block">
          <img src="/media/{{blog_item.image}}" class="bd-placeholder-img" width="250" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>

        </div>
      </div>
    </div>
    {% endfor %}
  {% endblock %}

В чем может быть проблема? Ошибка, которую я получаю при нажатии на url изображения внутри определенного поля BlogPost ImageField...

404:Страница не найдена

Пожалуйста, предложите мне решение.

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