异步 Javascript Promise 设置 img 的 src

Question

编辑：我还在用这个头撞我的桌子。

我正在尝试为画廊中的一堆 img 标签动态设置 src，并使用 javascript。每张画廊幻灯片都有 img 标签，我将它们分为两类， “之前和之后”。问题是有些页面有全部 8 张照片，而其他页面则更少。如果图像加载成功（*在这种情况下，让我们将成功定义为响应不是 404 未找到），一个 .loaded 类被添加到 img 中，这给它一个边框，但如果有一个 404 未找到，然后一个 .loaded 类。添加了隐藏类，将 display: hidden 设置为 img。

当前问题：尽管某些 img 标签在控制台中生成以下错误消息“GET http://blablabla/Images/gallery/job1/before-1.jpg 404 (Not Found)”，. onerror 不会触发， .onload 会触发。如果我检查尚未加载的 img 标签（顺便说一句，它们已经在页面上），我可以看到它们具有已填写的 src 属性，尽管提供的路径中的图像不存在。当然它仍然应该是一个错误？

const loadImg = function (img, url) {
    return new Promise((myResolve, myReject) => {
      img.src = url;
      img.onload = myResolve(img);
      img.onerror = myReject(img);
    });
  };

  const populateBeforeImgs = function () {
    for (let i = 0; i < beforeImgs.length; i++) {
      const img = beforeImgs[i];
      const url = `Images/gallery/job${galleryIndex}/before-${i + 1}.jpg`;
      loadImg(img, url)
        .then((value) => {
          value.classList.add("loaded");
        })
        .catch((error) => {
          error.classList.add("hidden");
        });
    }
  };

  const populateAfterImgs = function () {
    for (let i = 0; i < afterImgs.length; i++) {
      const img = afterImgs[i];
      const url = `Images/gallery/job${galleryIndex}/after-${i + 1}.jpg`;
      loadImg(img, url)
        .then((value) => {
          value.classList.add("loaded");
        })
        .catch((error) => {
          error.classList.add("hidden");
        });
    }
  };

Answer 1

问题在于你的loadImg 函数：

if (Response.ok) {       

Response 是在 window 上定义的，但 Response.ok 是未定义的。未定义的计算结果为假（是一个假值）

试试这个：

const loadImg = function(img, url) {
  return new Promise((resolve, reject) => {
    img.src = url;
    img.onload = () => resolve(img);
    img.onerror = () => reject(img);
  });
};

const img1 = new Image();
const img2 = new Image();

loadImg(img1, "https://www.placecage.com/c/200/300").then((img) => console.log("image 1 loaded!")).catch(() => console.warn("img 1 failed to load"));
loadImg(img2, "https://ihopethisisnotavalidurladasdasd").then((img) => console.log("image 2 loaded!")).catch(() => console.warn("img 2 failed to load"))