检查状态是否为200。

Question

我正在遍历一个对象数组，这些对象包含指向图像的链接。其中一些图像返回状态403，不显示。

以下是我在ejs中的内容

<% Recipes.forEach(recipe => { %>
    <div class="basis-2/12 min-w-max">
        <% if (recipe.image) { %>
        <img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="<%= recipe.image %>" />
        <% } else { %>
        <img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="/images/placeholder.png" /> <% } %>
    </div>
<% }) %>

if (recipe.name)本身只检查是否存在链接，这始终是正确的。

我该怎么做呢？

Answer 1

此解决方案工作正常，recipe.image (在本例中)必须具有null值。

Answer 2

在呈现页面之前，您必须在服务器上实际获取图像，这将减缓加载速度。

如果可以在客户端使用JavaScript，请考虑在那里实现回退。例如，参见以下答案：https://stackoverflow.com/a/1588899/240963

<img
  src="<%= recipe.image %>"
  onerror='this.onerror = null; this.src="/images/placeholder.png"'
/>

或者，您可以在服务器上实现一个代理，并在找不到原点上的映像时提供回退服务；这方面的有用包是：https://github.com/http-party/node-http-proxy。