Media Image is not loaded in the output of Django Project

I am working on this django project where after uploading images to media through admin panel, i couldn't get any image in the output although, it's alt text are shown. Here is some code which may help you to trigger an issue.

project/settings.py

BASE_DIR = Path(__file__).resolve().parent.parent

MEDIA_URL = '/media/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

# Create the 'static' directory if it doesn't exist
os.makedirs(os.path.join(BASE_DIR, 'static'), exist_ok=True)

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

project/urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
else:
    urlpatterns += staticfiles_urlpatterns()

models.py posterImage = models.ImageField(upload_to='poster/', blank=True, null=True) app/urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

views.py

 movies = Movie.objects.all()
 return render(request, 'movie.html', {'movies': movies})

movie.html

 {% for movie in movies %}
            <div class="carousel-item">
                <img src="{{ movie.image.url }}" class="d-block w-100" alt="{{ movie.title }}">
            
                <div class="carousel-caption">
                    <h5>{{ movie.title }}</h5>
                </div>
            </div>
            {% endfor %}

I am hoping to get the image after i uploaded image in the admin panel using {{movie.image.url}}

<img src="{{ movie.image.url }}" class="d-block w-100" alt="{{ movie.title }}">

change this to

<img src="{{ movie.posterImage.url }}" class="d-block w-100" alt="{{ movie.title }}">

since you have a field named posterImage and you are referencing it through image.url