Django模板列表图片未全显示：商品页面商品图片展示问题求助

需求说明 #

• 开发一个简单的商品Django网站，首页包含电子产品、玩具两个分类链接
• 点击分类链接进入二级页面后，每个分类下展示3个商品，且每个商品要显示对应图片

现有代码 #

index.html

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="{% static "productApp/css/index.css" %}">
    </head>
    <body>
        <h1>Welcome to our online shoping portal</h1>           
        <ul>
            <li><a href="/electronics">Electronics<img src="productApp/images/electronics.jpeg"/></a></li>
            <li><a href="/toys">Toys</a></li>
            <li><a href="/shoes">Shoes</a></li>
        </ul>   
    </body>
</html>

product.html

<!DOCTYPE html>
{% load static %}
<html>
    <head>      
        <title></title> 
        <link rel="stylesheet" href="{% static "productApp/css/product.css" %}">
    </head>
    <body>
        <h1>{{heading}}</h1>
        <ul>
        <!-- <img src="{% static "productApp/images/electronics.jpg"%}"/> -->
            <li>{{product1}}</li>
            <li>{{product2}}</li>
            <li>{{product3}}</li>
        </ul>
    </body>
</html>

实现方案 #

1. 调整视图函数，传递商品及图片数据

在views.py里，给分类视图传递包含商品名称和图片路径的列表：

from django.shortcuts import render

def electronics(request):
    # 构造电子产品数据，包含名称和对应图片路径
    products = [
        {"name": "智能手机", "image": "productApp/images/phone.jpg"},
        {"name": "笔记本电脑", "image": "productApp/images/laptop.jpg"},
        {"name": "无线耳机", "image": "productApp/images/headphones.jpg"},
    ]
    return render(request, 'productApp/product.html', {'heading': '电子产品', 'products': products})

def toys(request):
    # 构造玩具类商品数据
    products = [
        {"name": "积木套装", "image": "productApp/images/blocks.jpg"},
        {"name": "遥控汽车", "image": "productApp/images/car.jpg"},
        {"name": "毛绒玩偶", "image": "productApp/images/doll.jpg"},
    ]
    return render(request, 'productApp/product.html', {'heading': '玩具', 'products': products})

2. 修改product.html，循环渲染商品和图片

把原来的单个商品变量改成循环遍历列表，每个商品项同时展示图片和名称：

<!DOCTYPE html>
{% load static %}
<html>
    <head>      
        <title>{{heading}}</title> 
        <link rel="stylesheet" href="{% static "productApp/css/product.css" %}">
    </head>
    <body>
        <h1>{{heading}}</h1>
        <ul>
            {% for product in products %}
            <li>
                <!-- 加载商品对应图片 -->
                <img src="{% static product.image %}" alt="{{product.name}}" style="width: 100px; height: auto;">
                <!-- 显示商品名称 -->
                <span>{{product.name}}</span>
            </li>
            {% endfor %}
        </ul>
    </body>
</html>

3. 修正index.html的图片路径问题

首页里的图片要使用{% static %}标签确保路径正确：

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <title>在线商城首页</title>
        <link rel="stylesheet" href="{% static "productApp/css/index.css" %}">
    </head>
    <body>
        <h1>欢迎来到我们的在线商城</h1>           
        <ul>
            <li><a href="/electronics">电子产品 <img src="{% static "productApp/images/electronics.jpeg" %}"></a></li>
            <li><a href="/toys">玩具</a></li>
            <li><a href="/shoes">鞋子</a></li>
        </ul>   
    </body>
</html>

4. 确认路由配置

确保urls.py里配置了对应分类的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('electronics/', views.electronics, name='electronics'),
    path('toys/', views.toys, name='toys'),
]

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