我的第一个 Django 项目和 images_url 没有加载任何东西一切正常但是图像不会加载

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

我正在制作一个销售水果的演示网站,我正在关注一个 youtube 教程(使用 mosh 代码)他的图像正确加载,但我的图像不会像添加到购物车按钮和正确加载产品名称这样的其他东西。我是编程新手,所以请尽量不要使用复杂的编程术语来回答问题,感谢任何愿意帮助我的人。

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

这一行是你的问题:

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

class 是一个属性,它为 HTML 元素指定一个或多个 class 名称,在本例中为 img 元素。 class 名称可由 CSS 和 JavaScript 用于为具有指定 class 名称的元素执行某些任务。因此,在这种情况下,class 值不应是动态值,因为 class 属性不用于显示信息。

src属性用来指定URL的源图片

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