将javascript函数输出分配给液体变量

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 将在之后运行它的代码。

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