Я получаю сломанное изображение на html-странице (корзина) [закрыто]

Я создаю функцию добавления в корзину для своего сайта. Я получаю неработающие изображения на странице cart.html. Итак, в cart.html:

{% for product_id, item in data.items %}
<div class="col-md-12 col-lg-8">
    <div class="items">
        <div class="product">
            <div class="row">
                <div class="col-md-3">
                    <img class="img-fluid mx-auto d-block image" src="{{item.image}}" > <!-- #1 -->
                </div>
                <div class="col-md-8">
                    <div class="info">
                        <div class="row">
                            <div class="col-md-5 product-name">
                                <div class="product-name">
                                    <a href="#">{{item.title}}</a>
                                    <div class="product-info">
                                        <div>Display: <span class="value">5 inch</span></div>
                                        <div>RAM: <span class="value">4GB</span></div>
                                        <div>Memory: <span class="value">32GB</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 quantity">
                                <label for="quantity">Quantity:</label>
                                <input id="quantity" type="number" value ="1" class="form-control quantity-input">
                            </div>
                            <div class="col-md-3 price">
                                <span>{{item.price}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Вы можете видеть в #1, что я добавляю туда изображение. Я также создал представление для функции добавления в корзину Итак, в views.py:

def add_to_cart(request):
    cart_product={}
    cart_product[str(request.GET['id'])]={
        'title': request.GET['title'],
        'qty': request.GET['qty'],
        'price': request.GET['price'],
        'image': request.GET['image'],
        'pid': request.GET['pid'],
    }

    if 'cart_data_obj' in request.session:
        if str(request.GET['id']) in request.session['cart_data_obj']:
            cart_data= request.session['cart_data_obj']
            cart_data[str(request.GET['id'])]['qty']=int(cart_product[str(request.GET['id'])]['qty'])
            cart_data.update(cart_data)
            request.session['cart_data_obj']=cart_data
        else:
            cart_data=request.session['cart_data_obj']
            cart_data.update(cart_product)
            request.session['cart_data_obj']=cart_data
            request.session['total_cart_items'] = len(cart_data)
    else:
        request.session['cart_data_obj']=cart_product
        request.session['total_cart_items'] = len(cart_product)
    return JsonResponse({"data":request.session['cart_data_obj'],'totalcartitems': request.session['total_cart_items']})

В файле function.js:

$("#add-to-cart-btn").on("click",function(){
    let quantity=$("#product-quantity").val()
    let product_title=$(".product-title").val()
    let product_id=$(".product-id").val()
    let product_price = $("#current-product-price").text()
    let product_image = $(".product-image").val()
    let product_pid=$(".product-pid").val()
    let this_val=$(this)


    console.log("Quantity:", quantity);
    console.log("Id:", product_id);
    console.log("PId:", product_pid);
    console.log("Image:", product_image);
    console.log("Title:", product_title);
    console.log("Price:", product_price);
    console.log("Current Element:", this_val);

    $.ajax({
        url: '/add-to-cart',
        data: {
            'id': product_id,
            'pid': product_pid,
            'image':product_image,
            'qty': quantity,
            'title': product_title,
            'price': product_price
        },
        dataType: 'json',
        beforeSend: function(){
            console.log("Adding products to cart");
        },
        success: function(res){
            this_val.html("Go to Cart")
            console.log("Added products to cart");
            $(".cart-items-count").text(response.totalcartitems)
        }
    })
})

Вы видите, что я создал функцию добавления в корзину для моего сайта. Когда я нажимаю на кнопку добавления в корзину, она принимает значения, также на странице корзины она отображает цену, название, но только проблема в том, что изображение сломано. add to cart html:

        {%  for p in products  %}
        <div class="product-price">
          <span id="current-product-price">Our Price:{{p.price}}</span>
          <del>M.R.P: {{p.old_price}}</del>
        </div>
        <div class="button">
          <input type="hidden" value="{{p.id}}" class="product-id" name="">
          <input type="hidden" value="{{p.title}}" class="product-title" name="">
          <input type="hidden" value="{{p.image}}" class="product-image" name="">
          <input type="hidden" value="{{p.pid}}" class="product-pid" name="">
          <a href="#" class="btn" id="add-to-cart-btn">Add to cart</a>
          <a href="#" class="btn">Buy Now</a>  
        </div>
          {%  endfor  %}

Во 2-м html-коде логика работы кнопки добавления в корзину

Пожалуйста, помогите мне с этой проблемой

Вернуться на верх