将液体分配给javascript变量答案

【问题标题】：assigning liquid to javascript variable将液体分配给javascript变量
【发布时间】：2019-02-01 11:32:10
【问题描述】：

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 问题（Shopify: Using variables from {% schema %} in Javascript、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:

【问题讨论】：

标签： javascript shopify liquid

【解决方案1】：

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

使用实际文件名所在的虚拟文本创建完整的字符串：

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

这会产生：

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

然后使用字符串替换将“文件名”替换为资产变量：

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

【讨论】：

如果这解决了您的问题，请将其标记为答案。
比起var thing = '{{ some_liquid_variable }}'，我更喜欢使用var thing = {{ some_liquid_variable | json }} - json 过滤器将始终保证生成的输出是 javascript 合法的，并且会转义任何奇怪的字符等。不是文件名很重要，但对于可能出现引号的描述或货币格式等任何内容都是无价的。

【解决方案2】：

通过以下方式检索变量：

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

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

【讨论】：

这将image 作为字符串而不是引用变量，我将更新我的问题以更清楚。
无论imagevar 的值是多少，它都会返回给你。可以直接在图片标签的src中使用。
返回：liquid image: //cdn.shopify.com/s/files/0/0000/0000/0000/t/00/assets/image?0000000000
如果我想让 'image' 成为一个变量呢？
如果 'image' 是一个变量并且可以包含任何值，并且如果提到的文件名存在于 assets 文件夹中，那么它应该可以工作。我还没有尝试过。如果“图像”因您而异，您可以使用问题的解决方案。