如何使用innerHTML正确添加img元素

Question

我正在尝试使用innerHTML呈现一些img元素，在某些情况下它有效，而在其他情况下则无效。

片段：

我有两个字符串，在视觉上它们具有相同的内容，但是严格的相等比较 ( === ) 并没有说同样的事情。

也许这是一个编码问题？ 有没有办法转义字符串来解决问题？

 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>

Answer 1

我认为它的placehold.it域问题。 它没有在 innerHTML 中正确加载，但是当我使用来自via.placeholder.com的图像时，它工作正常。

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

Answer 2

您的代码有效，但我相信它有时会出现，而有时它不会因为 https vs http 而出现。 如果图像与运行它的站点使用的协议不同，浏览器将阻止图像。

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

Answer 3

问题不在于您的 js，而在于您的 html 元素。 DIV 不是一个自我关闭的元素不要做<div id="div-test" />而不是<div id="div-test"></div>

Answer 4

你没有你div标签关闭......当我与运行代码div标签关闭一切工作正常：

 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>

Answer 5

发现问题了，第一个img标签里面的空格其实就是下面的代码： \  。

因此，如果我将\ 所有出现替换为" " ，则图像将正常呈现

 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(/\ /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>