How to fix website picture problem on HTML

{% extends 'base.html' %}

{% block content %}
    <hi>Products</hi>
    <div class="row">
        {% for products in products %}
         <div class="col">
            <div class="card" style="width: 70rem;">
                <img src="{{ products.image_url }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ products.name }}</h5>
                    <p class="card-text">${{ products.price }}</p>
                    <a href="#" class="btn btn-primary">Add to Cart</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}

Is there a problem with this code

I tried reformatting the code, by replacing the products.url into the alt brackets. But it was what i typed on in the brackets that showed up.

Answer

I am not exactly sure what your problem is but I see problem in code, try replacing:

{% for products in products %}

to

{% for single_product in products %}

and then update this lines with new variable name single_product

<img src="{{ single_product.image_url }}" class="card-img-top" alt="...">
<h5 class="card-title">{{ single_product.name }}</h5>
<p class="card-text">${{ single_product.price }}</p>

By using the same variable name you are overriding it