django media images wont display

Question

I have deployed a Django project on a server. The project has a blog app in which you can add posts from the admin page. Each post has some paragraphs, a title, and an image. The posts get created perfectly, but sometimes when I revisit the site, the pictures I uploaded don't display.

I have found out that if I clear the browser's cache by pressing ctrl+f5, the images will get displayed. And everything goes back to normal after cache clearing. But this is not ok, and I cant tell every user to clear their browser cache, obviously.

settings.py

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


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

and I have added this line in my main urls.py:

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

and this the template:

{% for post in posts %}
<div class="container-fluid blog-main mb-5">
    <a href="{% url 'news-anjoman-detail' post.slug %}">
        <div class="row">
            <div class="col-lg-5 pt-5 pb-3 my-5">
                <h5>{{ post.title | persianize_digits }}</h5>
                <p>{{ post.summ | persianize_digits }} </p>
                <hr>
                <small>{{ post.published|jformat:"%d %B %Y" | persianize_digits | custom_dates }} | </small>
                <small>
                    {% for tag in post.tags.all %}
                    {{ tag.name }}
                    {% endfor %}
                </small> 
                <br>
            </div>
            <div class="col-lg-7">
                <img style="max-height: 400px; object-fit: cover;" src="{{ post.image.url }}" alt="">
            </div>
        </div>
    </a>
</div>
{% endfor %}