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

Posted 2023-02-23

【中文标题】如何在 div 的 html 背景 url 中使用产品图片？姜戈

【英文标题】：How do I use product image in html background url of a div?. Django

【发布时间】：2021-06-24 07:46:21

【问题描述】：

我不知道如何在模板中显示产品图片。 图片需要放在 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')
]

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

【问题讨论】：

请编辑您的问题并将您的代码的链接/屏幕截图替换为代码本身。 ***.com/help/how-to-ask

有趣。请看一下这个问题的答案：***.com/questions/66833381/…

你的情况也一样：这些不是 static 文件，而是 media 文件。

【参考方案1】：

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

它们由MEDIA_ROOT 和MEDIA_URL 设置管理，并且必须在这样的模板中引用：

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

注意 周围的额外单引号

【讨论】：

当然它不是静态的，而是媒体，我完全忘记了 product.photo_main.url 工作了 非常感谢