I'm trying to render some img elements with innerHTML, in some cases it works and in others it doesn't.
The snippet:
I have two strings, visually they have the same content, but the strict equality comparison (===) don't say the same thing.
Maybe it's a encoding issue? Is there any way to escape the string to solve the problem?
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>I think its placehold.it domain issue. It's not loading properly in innerHTML but when I use an image from via.placeholder.com it's working fine.
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"/>Your code works, but i believe it sometimes shows up and other times it doesnt due to https vs http. Browser will block an image if its not using same protocol as the site running it.
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" />The issue is not your js but your html element. A DIV is not a self close element don't do <div id="div-test" /> do this instead <div id="div-test"></div>