Media files uploaded by the user are not getting displayed - html

Question

Using django for rendering user uploaded data from a "/blogs/createblog" form web page to "/blogs" webpage, but the image file uploaded by the user is not getting displayed in his/her blogpost ("/blogs") page. My settings.py, base level/urls.py, app/models.py, app/views.py and the html templates are something like this:
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;">Continue reading</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 %}
What might be the problem?? The error which i am getting by clicking on the image url inside the specific BlogPost ImageField is..
404:Page not found
Please suggest me the solution.