my first django project and the images_url dosent load anything every thing works perfectly but but the images wont load

Question

i am making like a demo website that sells fruits i am following a youtube tutorial by (code with mosh) his images loaded properly but my images wont other things like add to cart button and name of product loaded properly. I am very new to programming so please try not to use complex programming terms for answer and thanks to anyone who will be trying to help me.

admin.py

from django.contrib import admin
from .models import Product, Offer

class OfferAdmin(admin.ModelAdmin):
    list_display = ('code', 'discount')

class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'stock')

admin.site.register(Product, ProductAdmin)
admin.site.register(Offer, OfferAdmin)

apps.py

from django.apps import AppConfig

class ProductsConfig(AppConfig):
    name = 'products'

models.py

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)

class Offer(models.Model):
    code = models.CharField(max_length=10)
    description = models.CharField(max_length=255)
    discount = models.FloatField()

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index),
    path('new', views.new)
    ]

views.py

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})

def new(request):
    return HttpResponse('New products')

index.html

{% 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 %}

Answer 1

This line is your problem:

<img src="..." class="{{ product.image_url}}" alt="...">

The class is an attribute which specifies one or more class names for an HTML element, which will be the img element in this case. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. Therefore, in this case, the class value should not be a dynamic value as the class attribute is not used to display information.

The src attribute is used to specify the URL of the source image

<img src="{{ product.image_url}}" alt="...">