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

Question

我正在制作一个销售水果的演示网站，我正在按照 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 %}

Answer 1

这一行是你的问题：

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

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

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

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