How to properly add img element with innerHTML

Question

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>

`` why is this at the end of your innerHTML content? it looks like this COULD be the problem... and i imagine your loop on the server side may be iterating too many times... for example: if you had an 3-entry array with 2 images and the last entry was empty... and your code doesn't do some conditional testing... the loop could try to output the empty string... HOWEVER it does not explain why you SEEM to be attempting to close the tag with which is incorrect... is self closing... example: `` — aequalsb, Oct 28 '21 at 14:30
@aequalsb I believe this is because the slashes are stripped from the string after the inner HTML set... Even with the tags properly closed, the error continues :/ — Mathiasfc, Oct 28 '21 at 14:34
Tested your code and it works without problems. See https://jsfiddle.net/76xcyaoq/ — lukas.j, Oct 28 '21 at 14:36
@lukas.j Thx for the help, but try to copy the question snippet to answer and take a look at `console.log`, idk what is causing this, it looks like an encoding problem — Mathiasfc, Oct 28 '21 at 14:56
There is a console on jsfiddle (on the bottom right). I do not see the problem you describe. — lukas.j, Oct 28 '21 at 14:58

score 0 · Answer 1 · answered Oct 28 '21 at 14:38

0

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"/>

answered Oct 28 '21 at 14:38

Sahid Hossen

1,377
12
14

Thank's for the answer, but I believe that's not the problem, I edited the url of the images in the question, the problem continues – Mathiasfc Oct 28 '21 at 14:50

slashroot · Answer 2 · 2021-10-28T15:16:15.200

0

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" />

edited Oct 28 '21 at 15:16

answered Oct 28 '21 at 14:39

slashroot

773
1
4
13

Thank's for the answer, but I believe that's not the problem, I edited the url of the images in the question, the problem continues – Mathiasfc Oct 28 '21 at 14:49
@Mathiasfc I've copied your UPDATED code to [this jsFiddle](https://jsfiddle.net/25gx7a96/) And its working just fine. Both images load without any problems. – slashroot Oct 28 '21 at 15:14
Do you have any ideia why in the question code snippet isn't work? Look at the html string, they are the same – Mathiasfc Oct 28 '21 at 17:34

score 0 · Answer 3 · answered Oct 28 '21 at 18:01

0

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>

answered Oct 28 '21 at 18:01

Kubwimana Adrien

2,463
2
8
11

score 0 · Answer 4 · answered Oct 28 '21 at 18:08

You don't have your div tag closed... when i run your code with the div tag closed everything works fine:

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" /></div>

score 0 · Answer 5 · answered Oct 29 '21 at 12:59

Found the problem, the white spaces inside the first img tag are actually the following code: \u00A0.

So if I replace all ocurrences of \u00A0 with " ", the image is rendered normally

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.replace(/\u00A0/g, " ") + htmlAux;

console.log('html == htmlAux: ', html == htmlAux)
console.log('typeof(html): ', typeof(html));
console.log('typeof(htmlAux): ', typeof(htmlAux));

<div id="div-test"></div>

How to properly add img element with innerHTML

5 Answers5