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

我正在尝试验证javascript中是否存在图像URL。所以我在javascript中添加了这段代码，它接受URL并返回http状态代码

function imageExists(image_url){
    var http = new XMLHttpRequest();
    http.open('HEAD', image_url, false);
    http.send();
    return http.status != 404;
}

在liquid模板中，我想在像这样显示之前检查图像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>

{%assign tags=product.metafields.product_meta.tag | split:，“%}
{标记%中的标记的%s}
{%capture-tag_-slug%}{{tag | replace:，“}}{%endcapture%}
{%assign img_png='tag'| append:'-'| append:tag_slug | append:'.png'}
{%capture png_exists%}imageExists（{{img_png}}）{%endcapture%}
{%如果png_存在%}
{%else%}
{%assign img_jpg='tag'| append:'-'| append:tag_slug | append:'.jpg'}
{%capture jpg_exists%}imageExists（{{img_jpg}}）{%endcapture%}
{%如果jpg_存在%}
{%else%}
{%assign img_default='tag'| append:'-'| append:'default'| append:'.png%}
{%endif%}
{%endif%}
{{tag | capitalize}
{%endfor%}

我刚刚开始理解液体，所以我不知道这样是否正确。但这段代码的情况是，脚本标记被当作字符串使用，其中的代码没有运行

png_exists=imageExists（{{img_png}}）

---

我如何解决这个问题？

您正在将JS与液体混合，如果您只传递液体内容，这是可以的

目前，您可以看到这样的代码：

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

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

{%capture png_exists%}imageExists（{{img_png}}}）{%endcapture%}
png_exists=>imageExists(http://asset_img_url.jpg)

您不能在执行Javascript代码时期望liquid了解它，Javascript是在liquid之后执行的，所以liquid会完成它的逻辑，Javascript会在之后运行它的代码

---

所以不能在liquid中使用javascript功能。

我知道这一点。我想知道我怎样才能修好它？如何编辑代码以使js不在液体中？@SaeeshTendulkar您可以使用带有错误状态的图像标记

无法轻松检查资产是否存在液体。这不起作用。如果该图像不存在，我需要显示一个默认图像，并在此之前检查jpg图像。@SaeeshTendulkar根据上面的错误状态，使用Javascript逻辑可以做到这一点。您将只有两个图像，并根据是否触发错误状态显示其中一个，还有其他JS方法。我认为这很简单，这就是我需要的。关于如何修复它的方法。你能发一个作为答案吗？