Bigcommerce Stencil 在 css 中使用车把助手来设置背景图像答案

【问题标题】：Bigcommerce Stencil use handlebars helper in css to set background imageBigcommerce Stencil 在 css 中使用车把助手来设置背景图像
【发布时间】：2016-03-18 18:01:39
【问题描述】：

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

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

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

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

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

我看到有一个自定义的 stencilString 方法，但我不知道这在我的情况下如何工作，因为我不想在 CDN 上硬编码图像的整个 URL。

【问题讨论】：

标签： bigcommerce

【解决方案1】：

目前使用 Stencil，没有办法用变量引用它。这可通过蓝图获得。

【讨论】：

谢谢，谁能帮我解决这个问题：stackoverflow.com/q/36000933/736864

【解决方案2】：

您总是可以使用内联样式设置它：

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

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

【讨论】：

是的，我在问题中提到了这一点。