将 javascript 函数输出分配给 Liquid 变量

Question

我正在尝试验证图像 URL 是否存在于 javascript 中。所以我在 javascript 中添加了这段代码，它接受 URL 并返回 http 状态代码。function imageExists(image_url){    var http = new XMLHttpRequest();    http.open('HEAD', image_url, false);    http.send();    return http.status != 404;}在液体模板中，我想在显示之前检查图像 URL 是否存在，如下所示<div class="variant-cat-attributes">  {% assign tags = product.metafields.product_meta.tag | split: "," %}  {% for tag in tags %}      <div class="item">      {% capture tag_slug %}{{ tag | replace: " ", "_"}}{% endcapture %}      {% assign img_png = 'tag' | append: '-' | append: tag_slug | append: '.png'%}      {% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}      {% if png_exists%}        <img src="{{ img_png | file_img_url: '32x32' }}" />      {% else %}        {% assign img_jpg = 'tag' | append: '-' | append: tag_slug | append: '.jpg'%}        {% capture jpg_exists %}<script>imageExists({{ img_jpg }})</script>{% endcapture %}        {% if jpg_exists%}          <img src="{{ img_png | file_img_url: '32x32' }}" />        {% else %}          {% assign img_default = 'tag' | append: '-' | append: 'default' | append: '.png'%}          <img src="{{ img_default | file_img_url: '32x32' }}" />        {% endif %}      {% endif %}      <p class="item-name">{{ tag | capitalize }}</p></div> {% endfor %}</div>我刚刚开始了解液体，所以我不知道这样是否正确。但是这段代码发生的情况是脚本标记被当作字符串，并且其中的代码没有运行png_exists = imageExists({{ img_png }})我该如何解决这个问题？

Answer 1

你将 JS 与 Liquid 混合匹配，如果你只传递液体内容，这是可以的。

目前，液体看到你的代码如下：

{% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}

png_exists => <script>imageExists(http://asset_img_url.jpg)</script>

你不能执行Javascript代码并期望liquid知道它，Javascript是在liquid之后执行的，所以liquid完成它的逻辑，Javascript将在之后运行它的代码。

所以你不能在 Liquid 中使用 javascript 功能。