EDITAR: Todavía estoy golpeando mi cabeza contra mi escritorio con esto.
Estoy tratando de configurar el src para un montón de etiquetas img en una galería, dinámicamente y con javascript. Cada diapositiva de la galería tiene etiquetas img que he agrupado en dos categorías, "antes" y "después". El problema es que algunas páginas tienen las 8 fotos, pero otras tienen menos. Si una imagen se carga correctamente (*En este caso, definamos el éxito como que la respuesta NO es un 404 no encontrado), se agrega una clase .loaded al img que le da un borde, pero si no se encuentra un 404, entonces un . se agrega la clase oculta, que establece display: hidden en el img.
Problema actual: a pesar de que algunas etiquetas img generan el siguiente mensaje de error en la consola, "GET http://blablabla/Images/gallery/job1/before-1.jpg 404 (Not Found)", el .onerror no se activa, el .onload sí. Si inspecciono las etiquetas img (que ya están en la página por cierto) que no se han cargado, puedo ver que tienen un atributo src completo, aunque ofc no existe una imagen en la ruta proporcionada. ¿Seguramente debería ser un error?
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"); }); } };El problema es su función loadImg :
if (Response.ok) {La respuesta está definida en la ventana, pero Response.ok no está definido. Indefinido se evalúa como falso (es un valor falso)
Prueba esto:
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"))