Django电商项目中AJAX筛选商品列表无法渲染图片的问题求助

大家好，我正在给自己的电商项目做筛选功能，用AJAX生成筛选后的商品列表时，商品的文字信息都能正常显示，但图片就是加载不出来，实在搞不懂哪里出问题了，麻烦各位帮忙看看！

下面是我相关的代码片段：

urls.py #

urlpatterns = [
    path('', views.store, name='home'),
    path('category/<slug:slug>', views.category, name='category'),
    path('product-detail/<int:id>', views.product_detail, name='product_detail'),
    path('cart/', views.cart, name='cart'),
    path('checkout/', views.checkout, name='checkout'),
    path('contact/', views.contact, name='contact'),
    path('signin/', views.signin, name='signin'),
    path('signup/', views.signup, name='signup'),
    path('signout/', views.signout, name='signout'),
    path('filter-data/', views.filter_data, name='filter_data'),
]

views.py #

def filter_data(request):
    # 这里我漏写了category的获取逻辑，不过目前暂时不影响筛选功能
    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)
        print("All Products: ", all_products)

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

    ajax_template = render_to_string('ajax/product-list.html', {'products': all_products})
    return JsonResponse({"data": ajax_template})

AJAX前端代码 #

$.ajax({
    url: '/filter-data',
    data: _filterObj,
    dataType: 'json',
    beforeSend: function () {
        $(".ajaxLoader").show();
    },
    success: function (res) {
        console.log("This is res", res);
        $("#filteredProducts").html(res.data);
        $(".ajaxLoader").hide();
    }
});

Category.html（商品列表页面） #

<div class="col-lg-9 col-md-9">
    <div class="row" id="filteredProducts">
        {% for product in products %}
        <div class="col-lg-4 col-md-6">
            <div class="product__item">
                <div class="product__item__pic set-bg" data-setbg="{% if product.image %}{{ product.image.url }}{% endif %}">
                    {% 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>
                <div class="product__item__text">
                    <h6><a href="{% url 'product_detail' product.id %}">{{ product.name }}</a></h6>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="product__price">${{ product.price|floatformat:2 }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
        <div class="col-lg-12 text-center">
            <div class="pagination__option">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#"><i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    </div>
</div>

ajax/product-list.html #

这个文件的内容和上面Category.html里的商品循环部分完全一致，就是把{% for product in products %}到{% endfor %}的代码单独抽出来作为AJAX渲染的模板。

问题现象 #

筛选后商品的名称、价格这些文字信息都能正常显示，但图片就是加载不出来。我检查了控制台没有报错，后端打印的all_products里也确实存在商品的image字段数据。

如果需要看更多代码的话，我随时可以补充！

备注：内容来源于stack exchange，提问作者Gyabhu