Images are not displayed in html using Django, but the url of the image in the page code is the image 0 by 0! How to fix it?

Question

Django

When displaying on the site in the html code, I prescribe:

{% for products in product_list %}
            <!-- Product -->
            <div class="product">
              <div class="product_image"><img src="{{ products.img.url }}" alt=""></div>
              <div class="product_content">
                <div class="product_title"><a href="product.html">{{ products.name }}</a></div>
                <div class="product_price">{{ products.cost }}</div>
              </div>
            </div>
            {% endfor %}

The url of the image is written in the page code, but the image itself is not displayed!

here is the model code

class Products(models.Model):
  name = models.CharField("Имя продукта", max_length = 150)
  img = models.ImageField("Изображение", upload_to = "product/")
  description = models.TextField("Описание")
  cost = models.IntegerField("цена", default = 0)
  in_stock = models.BooleanField("наличие", default=False)
  hot = models.BooleanField("Хит", default = False)
  sale = models.BooleanField("Скидка", default=False)
  draft = models.BooleanField("черновик", default=False)

views:

class ProductView(View):
  def get(self, request):
    product = Products.objects.all()
    return render(request, "products/index.html", {"product_list" : product})

settings:

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

just in case css:

.products
{
  width: 100%;
  background: #FFFFFF;
  padding-top: 99px;
  z-index: 2;
}
.product
{
  width: calc((100% - 90px) / 4);
  margin-bottom: 59px;
}
.product_image
{
  width: 100%;
}
.product_image img
{
  max-width: 100%;
}
.product_content
{
  width: 100%;
  padding-top: 36px;
  padding-bottom: 38px;
}
.product_title a
{
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
  line-height: 1.1;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.product_title a:hover
{
  color: #e95a5a;
}
.product_price
{
  font-size: 16px;
  font-weight: 500;
  color: #6c6a74;
  line-height: 0.75;
  margin-top: 13px;
}

Answer 1

Check that the image is loaded correctly and is located in /media/product
Check that you have media output configured in the root urls.py

urlpatterns = [
    // ваши урлы
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)