Почему Django не отображает мои динамические фоновые изображения в моем шаблоне

#django #image #templates #view #model

#django #изображение #шаблоны #Вид #Модель

Вопрос:

Я отображаю динамический контент из своей базы данных в своих шаблонах с помощью django. Когда я проверяю URL-адрес изображения в консоли разработчика Google, он показывает, что URL-адрес изображения, которое я пытаюсь отобразить, правильный, но изображение по-прежнему не отображается на странице.

 template = loader.get_template("selling/shop.html")
    if Product.objects.exists():
        products = Product.objects.all()
        for product in products:
            productimages = product.productimage_set.all()
            for productimage in productimages:
                imageurl = productimage.product_images.url
            context = {
                    "products" : products,
                    "imageurl" : imageurl,
                }



<div class="container" id="storediv" >
   <div  id="noproducts">
     {% if products %}
     {% for product in products %}
     <div class="holla2 col-sm-12 col-lg-3" id="holla" style="background-image: url('{{ product.productimage_set.first.product_images.url }}');">
           <div class="alltext" id="textcontainer">
             <p class="alltext" id="one">{{ product.title}}</p>
             <p id="two">${{ product.price }}</p>
             <!-- <p id="three">{{ product.product_description }}</p> -->
          </div>
    </div>
     {% endfor %}
     {% else %}
     <h2>There don't seem to be any products now. Please check back later! 
  

Для дальнейшего уточнения, где говорится:
style="backgroundimage:url('{{product.productimage_set.first.product_images.url }}');"
работает правильно и отображает URL-адрес изображения, но изображение не отображается на странице.

Комментарии:

1. Является ли первая часть вашего кода вашей views.py ? Это немного сбивает с толку. Можете ли вы опубликовать свой views.py правильно и, по возможности, модели. py тоже, чтобы мы могли видеть ваши отношения?

2. вы ошиблись в стиле. изменить backgroundimage на background-image

Ответ №1:

если ваше изображение в вашем MEDIA_URL, вы можете использовать приведенный ниже код

 <header class="masthead" style="background-image:url({{ MEDIA_URL }}{{ object.image.url }});">