Estoy tratando de renderizar algunos elementos img con innerHTML , en algunos casos funciona y en otros no.
El fragmento:
Tengo dos cadenas, visualmente tienen el mismo contenido, pero la comparación de igualdad estricta ( === ) no dice lo mismo.
¿Quizás es un problema de codificación? ¿Hay alguna forma de escapar de la cadena para resolver el problema?
const html = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/>'; const htmlAux = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/>'; const div = document.getElementById("div-test"); div.innerHTML = html + htmlAux; console.log('html == htmlAux: ', html == htmlAux) console.log('typeof(html): ', typeof(html)); console.log('typeof(htmlAux): ', typeof(htmlAux)); <div id="div-test"></div>Creo que es un problema de dominio placehold.it . No se carga correctamente en innerHTML pero cuando uso una imagen de via.placeholder.com funciona bien.
const html = '<img src="https://via.placeholder.com/350x150"/>'; const div = document.getElementById("div-test"); div.innerHTML = html; console.log("innerHTML: ", div.innerHTML); <div id="div-test"/>Su código funciona, pero creo que a veces aparece y otras no debido a https vs http. El navegador bloqueará una imagen si no usa el mismo protocolo que el sitio que la ejecuta.
const html = '<p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Test" width="150" height="150"/>'; const div = document.getElementById("div-test"); div.innerHTML = html; //console.log("innerHTML: ", div.innerHTML); <div id="div-test" />El problema no es tu js sino tu elemento html. Un DIV no es un elemento de autocierre no haga <div id="div-test" /> haga esto en su lugar <div id="div-test"></div>