Pregunta: ¿Cómo puedo saber que una variable de imagen ha cargado correctamente una imagen desde una URL de imagen?
El código javascript relevante que he estado usando está debajo (estoy codificando una extensión de Chrome). Quiero tomar una imagen aleatoria de una serie de imágenes, para poder usar (inyectar) la imagen aleatoria en una página web. Pero como estoy tomando las imágenes de algunos sitios web que tienen toneladas de imágenes gratuitas, quiero asegurarme de que el sitio web de imágenes gratuitas no bloquee la imagen aleatoria por el motivo que sea (y si está bloqueada, intentaré con otra imagen aleatoria). tal vez de otro sitio). Necesito saber si img.src contiene una imagen real o no. Soy nuevo en javascript, estoy leyendo un libro que acabo de recibir ayer. ¿Necesito los puntos y comas o debo dejar de usar puntos y comas? (Vengo de una codificación de fondo en C/C++)
const myImages = []; myImages[0] = 'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg'; myImages[1] = 'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg'; myImages[2] = 'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg'; const img = document.createElement('img'); img.src = myImages[Math.floor(Math.random()*myImages.length)]; img.style.width = '100%'; img.style.height = 'auto'; document.querySelector('#pageContent').replaceWith(img);Debe escribir la lógica si la imagen no se carga en el error de carga de la imagen.
const myImages = []; myImages[0] = 'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg'; myImages[1] = 'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg'; myImages[2] = 'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg'; const img = document.createElement('img'); img.src = myImages[Math.floor(Math.random()*myImages.length)]; img.style.width = '100%'; img.style.height = 'auto'; document.querySelector('#pageContent').replaceWith(img); img.onerror = function() { // If image not loaded, write your logic here }; <div id="pageContent">imaged</div>Puedes usar el siguiente código
function checkExist() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log("exist") } }; xhttp.open("GET", "https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg",true); xhttp.send(); }Intente usar literales de plantilla es6 y, en lugar de literales de plantilla, use la etiqueta img con propiedades:
var img = `<img src=${myImages.Math.floor(Math.random()*myImages.length)} width='100%' height='auto'` document.querySelector('#pageContent').appendChield(img);