Django动态页面数据加载失败求助：DetailView无法渲染模型数据

你的代码存在几个核心问题，导致数据无法正常加载，下面逐一拆解并给出修正方案：

1. 视图类型误用 #

你要展示所有商品卡片列表，但错误使用了DetailView——这个视图是用来渲染单个对象详情的，列表展示应该用ListView。需要拆分出列表页和详情页两个视图：

修正后的views.py #

from django.views.generic import ListView, DetailView
from .models import inventory

# 商品列表页：展示所有商品卡片
class CarListView(ListView):
    model = inventory
    template_name = 'main/cars.html'
    context_object_name = 'inventory_list'  # 模板中循环用的变量名

# 商品详情页：展示单个商品的详细信息
class CarDetailView(DetailView):
    model = inventory
    template_name = 'main/car_detail.html'  # 单独的详情页模板
    context_object_name = 'car'

2. URL配置不完整 #

需要分别配置列表页和详情页的URL，避免命名冲突：

修正后的urls.py #

from . import views

urlpatterns = [
    # 商品列表页路由
    path('inventory/', views.CarListView.as_view(), name='car_list'),
    # 商品详情页路由，pk对应商品ID
    path('inventory/<int:pk>/', views.CarDetailView.as_view(), name='car_detail'),
]

3. 模板变量不匹配+图片路径错误 #

• 模板中循环的invent和视图定义的context_object_name不匹配；
• ImageField需要调用.url属性才能正确获取图片路径。

修正后的cars.html（列表页） #

{% extends 'main/layout.html' %}

{% block main %}
{% for el in inventory_list %}
    <div class="main-card ">
        <img src="{{ el.img_1.url }}" alt="{{ el.name }}">
        <h3>{{ el.name }}</h3>
        <h4>{{ el.rent }}</h4>
        <button><a href="{% url 'car_detail' el.id %}">Details</a></button>
    </div>
{% empty %}
    <p>暂无商品</p>
{% endfor %}
{% endblock %}

4. 模型__str__方法语法错误 #

你写的def str(self)缺少双下划线，应该是def __str__(self)，否则在Admin后台和调试时无法正确显示对象名称：

修正后的models.py片段 #

class inventory(models.Model):
    # ... 其他字段保持不变 ...

    def __str__(self):  # 修正为双下划线
        return self.name

    # ... Meta类保持不变 ...

额外注意事项 #

1. 媒体文件配置：确保在settings.py中配置了媒体文件路径，否则图片无法正常显示：

   MEDIA_URL = '/media/'
   MEDIA_ROOT = BASE_DIR / 'media'
   

   同时在项目根目录的urls.py中添加：

   from django.conf import settings
   from django.conf.urls.static import static
   
   urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
   

2. 详情页模板：需要创建car_detail.html来渲染单个商品详情，示例如下：

   {% extends 'main/layout.html' %}
   
   {% block main %}
       <h1>{{ car.name }}</h1>
       <img src="{{ car.img_1.url }}" alt="{{ car.name }}">
       <p>租金：{{ car.rent }}</p>
       <p>规格：{{ car.specs }}</p>
       <p>详情：{{ car.text }}</p>
   {% endblock %}
   

内容的提问来源于stack exchange，提问作者Maxgang2580