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

【问题标题】：How to properly add img element with innerHTML如何使用 innerHTML 正确添加 img 元素
【发布时间】：2021-12-13 18:14:13
【问题描述】：

我正在尝试使用innerHTML 渲染一些img 元素，在某些情况下它可以工作，而在其他情况下则不行。

sn-p：

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

可能是编码问题？有没有什么办法可以转义字符串来解决问题？

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));

&lt;div id="div-test"&gt;&lt;/div&gt;

【问题讨论】：

</img src="http:> 为什么在你的 innerHTML 内容的末尾？看起来这可能是问题...我想您在服务器端的循环可能会迭代太多次...例如：如果您有一个包含 2 个图像的 3 条目数组并且最后一个条目是空的。 ..并且您的代码没有进行一些条件测试...循环可能会尝试输出空字符串...但是它不能解释为什么您似乎试图用关闭标记这是不正确的... 正在自动关闭... 例如：<img src="http://where.com" />
@aequalsb 我相信这是因为在设置内部 HTML 之后，斜杠被从字符串中删除了......即使标签正确关闭，错误仍然存在：/
测试了您的代码，它可以正常工作。见jsfiddle.net/76xcyaoq
@lukas.j 感谢帮助，但尝试复制问题 sn-p 来回答并查看console.log，idk 是什么原因造成的，它看起来像编码问题
jsfiddle上有一个控制台（右下角）。我没有看到你描述的问题。

标签： javascript innerhtml

【解决方案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);

&lt;div id="div-test"/&gt;

【讨论】：

谢谢你的回答，但我相信这不是问题，我编辑了问题中图片的url，问题仍然存在

【解决方案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);

&lt;div id="div-test" /&gt;

【讨论】：

谢谢你的回答，但我相信这不是问题，我编辑了问题中图片的url，问题仍然存在
@Mathiasfc 我已将您的更新代码复制到this jsFiddle 并且它工作得很好。两张图片都可以正常加载。
您知道为什么问题代码中的 sn-p 不起作用吗？看html字符串，都是一样的

【解决方案3】：

问题不是你的 js，而是你的 html 元素。 DIV 不是自关闭元素不要这样做 <div id="div-test" /> 这样做而不是 <div id="div-test"></div>

【讨论】：

【解决方案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);

&lt;div id="div-test" /&gt;&lt;/div&gt;

【讨论】：

【解决方案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));

&lt;div id="div-test"&gt;&lt;/div&gt;

【讨论】：