Django使用REST Framework处理图片：商品多图无法在模板显示问题

你的代码存在几个关键问题导致前端无法展示图片，逐一拆解修复：

1. 视图层混淆了DRF ViewSet与Django模板渲染逻辑 #

你使用的ImageViewSet是DRF（Django REST Framework）用于构建API接口的组件，无法直接为Django模板传递上下文数据。模板渲染需要用Django原生的视图类（比如DetailView）来获取商品实例并传递到模板。

修正views.py： #

替换原有ViewSet，改用适合模板渲染的视图：

from django.views.generic import DetailView
from .models import Product

class ProductDetailView(DetailView):
    model = Product
    template_name = 'template.html'  # 替换为你的实际模板路径
    context_object_name = 'product'

同时在项目的urls.py中配置该视图的路由：

from django.urls import path
from .views import ProductDetailView

urlpatterns = [
    # 其他路由...
    path('product/<int:pk>/', ProductDetailView.as_view(), name='product-detail'),
]

2. 模板变量引用错误 #

模板中循环的images变量不存在，视图传递的是product对象，你需要通过模型定义的related_name（即product_images）来关联查询商品对应的图片。

修正template.html： #

调整循环变量，并增加空值判断避免报错：

<div class="product-bottom-slider owl-theme owl-carousel" id="sync2">
{% for img in product.product_images.all %}                   
    {% if img.image %}
    <div class="slide-top-item">
        <div class="slide-inner">
            <img src="{{ img.image.url }}" alt="product">
        </div>
    </div>
    {% endif %}
{% endfor %}
</div>

3. 媒体文件配置缺失（最容易忽略的核心问题） #

若未正确配置MEDIA文件路径，即使代码逻辑正确，前端也无法访问图片资源。

检查settings.py： #

确保添加以下配置：

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/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)

4. 序列化器无需用于模板渲染 #

你编写的ProductSerializer和ImageSerializer是DRF API专用组件，模板渲染不需要依赖它们，可保留但不影响当前问题修复。

额外验证点 #

• 确认后台上传的图片已实际存储在media/images/products/product-images目录下
• 检查商品关联的图片image字段是否为空（你的模型允许空值，模板中的判断已处理此情况）

内容的提问来源于stack exchange，提问作者jasmine sh.g