将液体分配给 javascript 变量

Question

var first = 'one',
    second = 'two.png';
    image = first + second;
console.log('js image: ' + image);
image = '{{ image | asset_url }}';
console.log('liquid image: ' + image);

在控制台中生成：

js image: onetwo.png
liquid image:

我无法获取代码以从液体过滤器输出代码。我试过使用 {% raw %} 并查看了一些 SO 问题 (, Using javascript variables in Shopify liquid, Using asset_url within a .js.liquid file) 无济于事。

我在这里做错了什么？我期待得到：

liquid image: onetwo.png?123456789

甚至删除 asset_url:

image = '{{ image }}';

仍然产生：

liquid image:

Answer 1

通过以下方式检索变量：

image = {{ 'image' | asset_url }};

//console log
js image: image.png
liquid image: image.png

Answer 2

在与@Subhrajyoti Das 聊天后，有一个很老套的方法。

使用虚拟文本创建完整字符串，其中实际文件名是：

assetString = '{{ 'filename' | asset_url }}'

这会产生：

cdn.shopify.com/s/files/0/0000/0000/0000/t/00/assets/filename?0000000000

然后使用字符串替换将'filename'替换为资产变量：

image = assetString.replace("filename", image);

将液体分配给 javascript 变量

assigning liquid to javascript variable

javascript

liquid

shopify