Estoy creando un sitio web de noticias con API de noticias para practicar y, a veces, algunas imágenes no se cargan. Entonces, ¿cómo puedo establecer una condición lógica como "usar esta imagen si no se carga" ?
Gracias
Puedes hacerlo así...
Reemplace invalid_link y https://placeimg.com/200/300/animals con sus enlaces.
<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">No está claro cómo está manejando las imágenes: ¿están codificadas en el HTML, están en una matriz?
Este ejemplo utiliza un método basado en Promise para reemplazar todas las imágenes malas con imágenes ficticias.
Se mapped una matriz de objetos de imagen (nombre, src). Para cada iteración (para cada objeto), llama a checkIfImageExists con el src y, en función de lo que devuelve la función (ya sea verdadero o falso), devuelve el objeto original (verdadero) o un nuevo objeto con la imagen ficticia como el src.
Cuando ejecute el fragmento, verá que badImage (segundo objeto) se le reemplazó el src con el URI de la imagen ficticia.
function checkIfImageExists(src) { return new Promise(res => { const img = new Image(); img.src = src; if (img.complete) { res(true); } else { img.onload = () => { res(true); }; img.onerror = () => { res(false); }; } }); } const dummy = 'https://dummyimage.com/48x48/633a63/000000.png&text=n/a'; const imgs = [ { name: 'flower', src: 'https://images.unsplash.com/photo-1649922694096-35448dfd411f' }, { name: 'badImage', src: 'https://images.unsplash.com/photo-1649922694096-35448dfd411eeeddddd' }, { name: 'sign', src: 'https://images.unsplash.com/photo-1649928210166-52c1b1d8279e' } ]; function filterImages(data) { return data.map(async obj => { const exists = await checkIfImageExists(obj.src); if (exists) return obj; return { ...obj, src: dummy }; }); } async function main() { console.log('Waiting for the image-checking to complete...'); const filtered = await Promise.all(filterImages(imgs)); console.log(filtered); } main();