检查 javascript 中是否存在图像在第一次尝试时不起作用

Question

我有一个 JS 函数，正在与正则表达式替换函数一起使用

this.replacer = function (match, name) {
    let img = new Image();

    img.src = `./img/emoji/${name}.png`;

    if (img.height != 0) {
        return `<img class="emoji" src="./img/emoji/${name}.png" title="${name}" height="20px">`;
    }
    else {
        return match;
    }
};

当使用图像尝试该功能时，它在第一次尝试时不起作用，尽管它在所有后续尝试中都有效。我很确定这是因为 Js 异步加载图像。
我在没有 npm 包的环境中工作。

干杯

Answer 1

您必须异步等待每个图像加载，然后才能确定它们已加载。你不能直接检查他们的身高。您的代码第二次工作的原因是因为您在手动加载图像后运行您的函数。 您可以通过编程方式使用 onload 和 onerror 回调进行等待，而不是手动执行此操作。

const asyncCheckIfImgResourceExists = async (resource) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = resource;
    img.onload = () => resolve(true);
    img.onerror = () => reject("image does not exist");
  });
};

const urlsToCheck = [
  "https://picsum.photos/200",
  "https://picsum.photos/201",
  "non_existing_picture.com",
];

urlsToCheck.forEach(async (url) => {
  console.log(await asyncCheckIfImgResourceExists(url), "load status");
});

这会记录 真实，真实 并抛出“图像不存在”（如果需要，您可以在 forEach 中捕获它而不是抛出） 来安慰。这应该可以解决你的问题。