My images are not displaying the post.photo.url call on my cpanel hosting

Question

Hello I just put my blog online on cpanel hosting. I managed the display with the whitenoise library of python. The static images work normally. But when I call the image from blogpost to display my image does not appear with post.photo.url. I am under cpanel and I would like to ask for your help to display the images of my blog on my site

class Photo(models.Model):
image = models.ImageField(verbose_name='image')
caption = models.CharField(max_length=128, blank=True, verbose_name='légende')
date_created = models.DateTimeField(auto_now_add=True)

IMAGE_MAX_SIZE = (1900, 1265)

def resize_image(self):
    image = Image.open(self.image)
    image.thumbnail(self.IMAGE_MAX_SIZE)
    image.save(self.image.path)

def save(self, *args, **kwargs):
    super().save(*args, **kwargs)
    self.resize_image()

def __str__(self):
    return self.caption
 

My models.py

class BlogPost(models.Model):
slug = models.SlugField()
categorie = models.ForeignKey(CategorieBlogs, on_delete=models.CASCADE)
image = models.ForeignKey(Photo, on_delete=models.CASCADE)
title = models.CharField(max_length=500, verbose_name="titre blog")
subtitle = models.CharField(max_length=500, verbose_name="sous titre")
contenu = models.TextField(max_length=1500, verbose_name="contenu blog")
description = models.TextField(max_length=2000, verbose_name="contenu blog 2")
titles = models.CharField(max_length=500, verbose_name="titre 2")
photo = models.ImageField(upload_to="photo blog")
contenus = models.TextField(max_length=2000, verbose_name="paragraph 2", blank=True)
descriptions = models.TextField(max_length=2000, verbose_name="paragraph contenu 2", blank=True)
datepub = models.DateField(verbose_name="Date de publication", auto_now_add=True)
published = models.BooleanField(default=False)
auteur = models.ForeignKey(AuteurPost, on_delete=models.CASCADE)

def save(self, *args, **kwargs):
    if not self.slug:
        self.slug = slugify(self.title)

    super().save(*args, **kwargs)

def get_absolute_url(self):
    return reverse("posts:home")

def __str__(self):
    return self.title

class Meta:
    ordering = ['-datepub']
    verbose_name = "Blog"


My views
class BlogHome(ListView):
model = BlogPost
context_object_name = "posts"
template_name = "blog/list.html"

def get_queryset(self):
    queryset = super().get_queryset()
    if self.request.user.is_authenticated:
        return queryset

    return queryset.filter(published=True)


class BlogPostDetail(DetailView):
model = BlogPost
context_object_name = "post"
template_name = "blog/detail.html"

My urls.py
from django.urls import path
from .views import BlogHome, BlogPostDetail

app_name = "posts"

urlpatterns = [
    path('', BlogHome.as_view(), name="home"),
    path('<str:slug>/', BlogPostDetail.as_view(), name="post"),

]

my html code

    <header class="masthead" style="background-image: url('{{ post.image.image.url }}')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="post-heading">
                        <h1>{{post.title}}</h1>
                        <h2 class="subheading">{{post.subtitle}}</h2>
                        <span class="meta">
                            Publié Par
                            <a href="#!">{{post.auteur }}</a>
                            le {{ post.datepub}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Post Content-->
    <article class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <p> {{ post.contenu }}</p>
                    <p> {{ post.description }}</p>
                    <h2 class="section-heading">{{ post.titles }}</h2> <br> <br>
                    <img class="img-fluid" src="{{ post.photo.url }}" alt="post.photo" />
                    <p>{{ post.contenus }}</p>
                    <p> {{post.descriptions}}</p>
                </div>
            </div>
        </div>
    </article>

Answer 1

First of all I think you have not configured your static files and media files. Try configuring it as follows. In your settings.py ensure to include STATICFILES_DIR, STATIC_ROOT, MEDIA_URL, MEDIA_ROOT in your settings.py and then add the below lines below STATIC_URL = 'static/'

MEDIA_URL = 'media/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / 'staticfiles/'
MEDIA_ROOT = BASE_DIR / 'static/media'

By doing this you are telling django where to get your static files. now your have to add the link of the static files in your project urls.py. you will add that as below.

from django.conf import settings
from django.conf.urls.static import 
static

urlpatterns = [
     .......
   ]
urlpatterns += 
static(settings.STATIC_URL, 
document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, 
document_root=settings.MEDIA_ROOT

One last thing that I assumed you had done is creating static folder in your project root and inside that static folder create media folder where all the images you want to load are. Now run python manage.py collectstatic