Async Javascript 承诺设置 img 的 src

Question

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

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

当前问题：尽管一些 img 标签在控制台中生成了以下错误消息，“GET http://blablabla/Images/gallery/job1/before-1.jpg 404（未找到）”，.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) {

响应已在 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"))

Async Javascript 承诺设置 img 的 src

Async Javascript Promise to set src of img

javascript

asynchronous

promise