如何使用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和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标记内的空白实际上是以下代码：u00A0。

因此，如果我用" "替换u00A0的所有位置，则图像正常呈现为

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>