image links from django admin reference in html syntax in python not displaying on site

Using Django Templates & Frontend
1

model.py code

from django.db import models


class Product(models.Model):
    name = models.CharField(max_length=255)
    price = models.FloatField()
    stock = models.IntegerField()
    image_url = models.CharField(max_length=2083)

views.py code

from django.http import HttpResponse
from django.shortcuts import render
from .models import Product


def index(request):
    products = Product.objects.all()
    return render(request, 'index.html', {'products':products})

index.html code

{% extends 'base.html' %}

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

base.html code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    {% block content %}
    {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>
2

Side note: When posting code (or templates) here, enclose the code (or template) between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted. (I’ve taken the liberty of editing this post for this.)

3

I don’t know how you’re managing this field (or the images themselves) in your system, but this isn’t the typical way of handling them.

How are you adding images to your system?

What are you using for the src attribute in the img tag? (That’s normally where the url is supplied.)