Tengo una serie de direcciones URL de imágenes que necesito agregar a un documento (que se muestra a continuación). Algunas de las URL no contienen imágenes. ¿Cómo verifico esto?
picUrls = ["https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg","http://www.fakeurl.io/fakeimage1.jpeg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg"]Estoy usando jquery y he probado .load & .error
for(let i = 0; i < picUrls.length; i++) { const picUrl = picUrls[i]; //create image to preload: var imgPreload = new Image(); $(imgPreload).attr({ src: picUrl }); //check if the image is already loaded (cached): if (imgPreload.complete || imgPreload.readyState === 4) { //image loaded: //your code here to insert image into page $('#content-container').append(imgPreload); } else { //go fetch the image: $(imgPreload).load(function (response, status, xhr) { if (status == 'error') { //image could not be loaded: console.log('error'); } else { //image loaded: //your code here to insert image into page $('#content-container').append(imgPreload); } });Puede crear una función auxiliar que devuelva una promesa si una imagen es una imagen válida o no
const picUrls = [ 'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg', 'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg', 'http://www.fakeurl.io/fakeimage1.jpeg', 'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg', ]; const getOnlyValidImage = src => new Promise((resolve, reject) => { const img = new Image(); img.src = src; img.onload = () => resolve(img); img.onerror = () => resolve(null); }); const preloadImages = async () => { for (let i = 0; i < picUrls.length; i++) { const picUrl = picUrls[i]; const image = await getOnlyValidImage(picUrl) if (image) { $('#content-container').append(image); } } }; preloadImages();