JS通过innerHTML插入img标签时显示代码而非图片如何解决

• 核心渲染错误：map搭配join('')执行后，imageHtml已经是拼接好的完整img标签字符串。你后续用for...of遍历这个字符串时，会把字符串拆成单个字符逐个往innerHTML追加。第一次追加的内容是孤立的<，浏览器会直接将其识别为普通文本节点，后续追加的所有字符都会被拼接到这个文本节点下，最终所有HTML代码都会以纯文本形式展示，完全不会被解析渲染为DOM元素。
• 资源路径错误：根据你给出的项目结构，图片存放在根目录下的_images文件夹，但代码中写的图片路径以/images/开头，和实际文件夹名不匹配，即便HTML正常渲染，图片也会因404无法加载。如果部署时没有把项目根目录设为站点根目录，以/开头的绝对路径也可能出现寻址错误。

1. 删除多余的for...of遍历逻辑，不要逐字符追加内容，直接把拼接完成的完整HTML字符串一次性赋值给innerHTML，避免浏览器误将标签解析为文本。
2. 修正图片路径，和实际目录结构匹配：如果站点根目录对应项目根目录，路径改为/_images/${image}.png；如果用相对当前bj.html的路径，写为../../_images/${image}.png（从_html目录向上返回两层到项目根目录，再进入_images文件夹）。

修复后的完整代码如下：

setCardHtml(){
    // 直接拼接得到所有img标签的完整字符串
    const imageHtml = this.cards
        .map((image) => `<img class="cards base-cards" src="/_images/${image}.png">`)
        .join('')
    // 一次性赋值渲染，避免逐字符追加导致的解析错误
    elements.playerCards.innerHTML = imageHtml
}

补充排查点：如果修改后仍显示纯文本，检查是否有其他逻辑对elements.playerCards使用了textContent赋值，textContent会直接将所有内容作为纯文本插入，不会解析HTML标签。

内容的提问来源于stack exchange，提问作者Ryan Garcia