为什么在我的 Shopify Liquid 代码的一部分中使用 image_url 会导致 404 错误，而在其他部分则不会？

Question

我正在 Shopify 中构建一个自定义部分，其中包括用于显示产品图像的图像模式。我面临的问题是，当我在代码的一部分中使用 image_url 作为 src 属性时，我在控制台中收到 404 警告，而它在代码的其他部分中工作正常。

发出 404 警告的代码：

<!-- Product Modal -->
<a id="product-modal" class="product-modal" href="" target="_self">
  <div class="modal-content">
    <img id="modal-product-image" src="{{ product.featured_image | image_url: width: 500, height: 500 }}" alt="Product Image" class="modal-product-image" width="500" height="500">
    <h3 id="modal-product-name" class="modal-product-name"></h3>
    <p id="modal-product-price" class="modal-product-price"></p>
    <button id="close-modal" class="close-modal">×</button>
  </div>
</a>

有效的代码（但被标记为过时）：

<!-- Product Modal -->
<a id="product-modal" class="product-modal" href="" target="_self">
  <div class="modal-content">
    <img id="modal-product-image" src="" alt="Product Image" class="modal-product-image" width="500" height="500">
    <h3 id="modal-product-name" class="modal-product-name"></h3>
    <p id="modal-product-price" class="modal-product-price"></p>
    <button id="close-modal" class="close-modal">×</button>
  </div>
</a>

我已经尝试过：

• 改用 img_url，它成功生成了图像 URL，但被 Shopify 的主题检查标记为过时且不是最佳实践。
• 确保product.featured_image在当前上下文中存在且有效，以确认图像源被正确引用。
• 在我的代码中使用 image_url，它在模板的其他部分可以正常工作，但在模态图像的 src 属性中使用时会导致 404 警告。
• 使用 ，可以避免 404 警告，但由于 src 属性为空而被标记为不是最佳实践。

我的问题：为什么在我的代码的其他部分使用 image_url 可以工作，但在模态的 src 属性中使用时会导致 404 警告？如何在遵守 Shopify 最佳实践的同时解决此问题？

Answer 1

您需要检查产品是否设置了featured_image。

{% if Product.featured_image != 空白 %} // 代码在这里。 {% endif %}