时间戳

首页 > 解决方案 > 如何在 div 的 html 背景 url 中使用产品图片？姜戈

django - 如何在 div 的 html 背景 url 中使用产品图片？姜戈

问题描述

我不知道如何在模板中显示产品图像。图像需要进入 div 的 background-url，使用静态不是一个选项，因为它不会出现在模型中。

html

 ....
    {% if products %}
      {% for product in products %}
    
       <div class="product-grid" style="background-image:url({% static 'images/product-1.jpg' %});">
         <div class="inner">
            <p>
               <a href="{% url 'single_product' %}" class="icon"><i class="icon-shopping-cart"></i></a>
               <a href="{% url 'single_product' %}" class="icon"><i class="icon-eye"></i></a>
           </p>
         </div>
      </div>
        {{ product.title }}
        ${{ product.price }}
      {% endfor %}
    {% endif %}
   ....

楷模

class Product(models.Model):
    ....
    photo_main = models.ImageField(upload_to='photos/%Y/%m/%d/')
    def __str__(self):
        return self.title

看法

def shop(request):
    products = Product.objects.order_by('-upload_date').filter(is_published=True)

    context = {'products': products}
    return render(request, 'shop/shop.html', context)

设置

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'ecom/static')
]

如果您知道该怎么做，请给我一个答案？查看图片了解更多信息

标签： djangodjango-modelsdjango-templatesdjango-media

解决方案

存储的文件ImageField是媒体文件，而不是静态的。

它们由MEDIA_ROOT和MEDIA_URL设置管理，必须在模板中引用，如下所示：

style="background-image:url('{% product.photo_main.url %}');"

注意 {} 周围的附加单引号

推荐阅读