如何使用JavaScript将图片渲染到HTML页面？代码问题排查求助

问题排查&修复方案 #

你的代码一共存在2处错误，修复后即可正常渲染图片：

• 第一处：img标签属性拼写错误
  你写的是scr，正确的图片路径属性是src，拼写错误会导致浏览器无法识别图片地址。
• 第二处：循环中字符串赋值逻辑错误
  循环里你每次都直接给getImgs赋值，会覆盖之前的内容，最终只会渲染最后一张图片，应该改用累加运算符+=拼接所有图片标签。

修复后的JS代码如下： #

const imgs = [
    "images/p1.jpg",
    "images/p2.jpg",
    "images/p3.jpg"
]

const container = document.getElementById("container")

function renderImages() {
    let getImgs = ""
    for (let i = 0; i < imgs.length; i++) {
        getImgs += `<img src="${imgs[i]}">`
    }
    container.innerHTML = getImgs
}

renderImages()

额外说明：如果修复后还是不显示图片，请确认你的项目目录下存在images文件夹，且文件夹内对应名称的图片文件存在，路径大小写和代码里的拼写保持一致即可。

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