javascript - 如果服务器上不存在图像 url，则将 url 替换为其他（多次）[没有 404 控制台错误]

Question

我为我的论坛系统制作了 lastposter 头像。

我想要什么：当用户头像 img 不存在时，多次更改文件类型。

例如; 如果user_user1_avatar.png不存在，则将 url 更改为user_user1_avatar.jpg，如果不存在，则更改为user_user1_avatar.gif，依此类推。

我试试这个，但仍然得到 404 错误。

var imgz = document.getElementsByClassName("lpavatar_forumID")[0];

function imageExists(url) {
  return new Promise((resolve, reject) => {
    const img = new Image(url);
    img.onerror = reject;
    img.onload = resolve;
    const timer = setInterval(() => {
      if (img.naturalWidth && img.naturalHeight) {
        img.src = ''; /* stop loading */
        clearInterval(timer);
        resolve();
      }
    }, 10);
    img.src = url;
  });
}

imageExists("bburl/uploads/avatars/avatar_avatar1.png")
  .then(()    => imgz.src = 'bburl/uploads/avatars/avatar_avatar1.png')
  .catch(()   => imgz.src = 'bburl/uploads/avatars/avatar_avatar1.jpg')
  .finally(() => imgz.src = 'bburl/uploads/avatars/avatar_avatar1.gif')

});

<img class="lpavatar_forumID" src="/avatar/user_user1.png" />
<img class="lpavatar_forumID" src="/avatar/user_user1.png" />
<img class="lpavatar_forumID" src="/avatar/user_user1.png" />

标签： javascripthtml