Bigcommerce Stencil在css中使用把手帮助器来设置背景图像

Question

有没有办法从CSS文件中引用cdn图像位置以设置背景图像？例如，在组件文件中，我可以使用：

引用图像文件

{{cdn 'img/my-image.jpg'}}

如果我想在css中将该图像用作背景图像，我需要在样式表中设置它。例如：

.element {
    background-image: url({{cdn 'img/my-image.jpg'}});
}

这是可能的，还是我需要在html中内联设置背景图片？

我发现有一种自定义stencilString方法，但我不知道这在我的情况下会如何工作，因为我不想硬编码图像的整个网址CDN。

Answer 1

目前使用Stencil，没有办法用变量引用它。这可以使用蓝图。

Answer 2

您始终可以使用内联样式设置它：

<div class="element" style="url( {{getImage image 'gallery' (cdn 'img/my-image.jpg') }}">

'gallery指的是要获取的图像大小。请参阅{{getImage}}帮助文档here