Django电商项目中AJAX动态加载产品列表图片不显示的解决方案

<div class="product__item__pic set-bg" data-setbg="{% if product.image %}{{ product.image.url }}{% endif %}">
    <!-- 其他内容 -->
</div>

<div class="product__item__pic set-bg">
  <img src="{% if product.image %}{{ product.image.url }}{% endif %}" alt="{{ product.name }}" style="width:100%; height:auto; object-fit:cover;"> 
  {% if product.labels == 'sale' %}
  <div class="label sale">{{ product.labels }}</div>
  {% elif product.labels == 'bestseller' %}
  <div class="label bestseller">{{ product.labels }}</div>
  {% else %}
  <div class="label new">{{ product.labels }}</div>
  {% endif %}
  <ul class="product__hover">
    <li><a href="{% if product.image %}{{ product.image.url }}{% endif %}" class="image-popup"><span class="arrow_expand"></span></a></li>
    <li><a href="#"><span class="icon_heart_alt"></span></a></li>
    <li><a href="#"><span class="icon_bag_alt"></span></a></li>
  </ul>
</div>

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # ... 其他路由
    path('filter-data/', views.filter_data, name='filter_data'),
]

# views.py
from django.shortcuts import render
from django.template.loader import render_to_string
from django.http import JsonResponse
from .models import Product # 假设你的产品模型是Product

def filter_data(request):
    colors = request.GET.getlist('color[]')
    sizes = request.GET.getlist('size[]')
    all_products = Product.objects.all()

    if len(colors) > 0:
        all_products = all_products.filter(color__id__in=colors)

    if len(sizes) > 0:
        all_products = all_products.filter(size__in=sizes)

    # 渲染包含过滤后产品的局部HTML
    ajax_template = render_to_string('ajax/product-list.html', {'products': all_products})
    return JsonResponse({"data": ajax_template})

// AJAX code
$.ajax({
    url: '/filter-data',
    data: _filterObj, // 包含过滤条件的对象，例如 { 'color[]': [1, 2], 'size[]': ['M'] }
    dataType: 'json',
    beforeSend: function () {
        $(".ajaxLoader").show(); // 显示加载动画
    },
    success: function (res) {
        $("#filteredProducts").html(res.data); // 将返回的HTML插入到指定容器
        $(".ajaxLoader").hide(); // 隐藏加载动画
        // 如果之前依赖data-setbg的JS功能仍然需要，你可能需要在这里手动重新初始化相关脚本
        // 例如：$('.set-bg').each(function () { $(this).css('background-image', 'url(' + $(this).data('setbg') + ')'); });
        // 但对于本教程的解决方案，此步骤已不再必要。
    },
    error: function(xhr, status, error) {
        console.error("AJAX Error:", status, error);
        $(".ajaxLoader").hide();
    }
});