如何在Shopify液体主题中获取基本资产网址？

Question

有没有办法在Shopify液体主题中获取基本资产网址？

我正在翻译Shopify。此页面使用Vuejs数据绑定，如下所示：

<img src="/path/to/assets/folder/{{ color }}1.jpg"> 

我无法将大括号传递给过滤器，因为它会对其进行URL编码。如果我有权访问资产网址，那就很简单了。

有什么想法吗？

Answer 1

您可以escape liquid templates，因此您的标记就像这样

<img src="/path/to/assets/folder/{{ "{{ color " }}}}1.jpg">

如果你问我，那就不好了。但还有另一种选择，使用vue bind而不是文本插值，因此没有花括号，当你使用v-bind指令时，那么你为该指令编写纯javascript，所以你引用你的src属性，或将其添加到组件的变量中。

使用文本

<img :src=" '/path/to/assets/folder/' + color + '1.jpg' ">

使用变量

<!-- template -->
<img :src="img_path">

// js, data or props attribute
img_path: '/path/to/assets/folder/' + color + '1.jpg'

注意：我使用的是v-bind:src => :src

的简写版本