Django ImageField shows wrong url

Question

I developed an e-commerce project, and now I am in the production phase in my own domain. Everything works perfect in development server.

I'm using white-noise for serving static files in production server. In my project, I have Product model and related ImageField, I am uploading pictures of the products in admin page and showing them in HTML templates. However, the problem I see in my project is

{{ product.image.url }} in HTML template calls
"my-domain/media/images/8720908160225-1.4bdc930ddb46.jpg"
However, correct call is
"my-domain/static/media/images/8720908160225-1.4bdc930ddb46.jpg"

Since "static" tag is missing, I am unable to show my uploaded pictures in my website.

Part of settings.py file:

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

DEBUG = False

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'store', # Django app
    'cart', # Django app
    'account', # Django app
    'payment', # Django app
    'mathfilters',
    'crispy_forms',
]
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [BASE_DIR / 'static',]
    MEDIA_URL = '/media/'
    MEDIA_ROOT = '/home/deb142470/domains/my-domain.nl/public_html/static/media'
    STATIC_ROOT = '/home/deb142470/domains/my-domain.nl/public_html/static'

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

Product model:

class Product(models.Model):

    title = models.CharField(max_length=250)

    brand = models.CharField(max_length=250, default='BaddiCO')

    description = models.TextField(blank=True)

    category = models.ForeignKey(
        Category, related_name="product", on_delete=models.CASCADE, null=True)

    slug = models.SlugField(max_length=250)

    price = models.DecimalField(max_digits=4, decimal_places=2)

    image = models.ImageField(upload_to='images/')

In my HTML I show all products via for loop:

{% extends "./base.html" %}

{% load static %}


{% block content %}

        <!-- for product in products -->
        {% for product in products %}

        <div class="col">
          <div class="card shadow-sm">
          <img class="img-fluid" alt="Responsive image" src="{{ product.image.url }}">

            <div class="card-body">
              <p class="card-text">
                <a class="text-info text-decoration-none" href="{{ product.get_absolute_url }}"> {{ product.title | capfirst}} </a>
              </p>
              <div class="d-flex justify-content-between align-items-center">
                <h5> $ {{ product.price }} </h5>
              </div>
            </div>
          </div>
        </div>

        {% endfor %}

When I upload a picture via admin page, I see the uploaded images in my MEDIA_ROOT. Here is the FTP view of MEDIA_ROOT.

However, as I said before, my main page is unable to show pictures because of wrong url call. If anyone can help me with this, I would be appreciated!