JavaScript动态设置img的src属性出现破碎图片问题求解

核心错误1：DOM结构不符合规范 #

你直接把<img>元素作为<tr>的直接子元素，不符合HTML表格的结构要求：<tr>的合法子元素只能是<td>（普通单元格）或者<th>（表头单元格），浏览器识别到结构错误后会出现渲染异常，导致图片无法正常展示。

核心错误2：使用网页URL而非图片直链 #

你示例中的https://oldschool.runescape.wiki/w/Mithril bar#/media/File:Mithril bar_detail.png是图片预览页的网页地址，不是图片资源的直接链接。img标签的src属性只能接受直接返回图片二进制资源的URL，请求该网页地址返回的是HTML文档，所以会渲染为破碎图。你直接在地址栏打开能看到图是因为网页做了前端渲染处理，并非该URL本身返回图片资源。

其他可能原因：跨域防盗链限制 #

部分站点会校验请求的Referer头，如果是非本站域名的请求会拒绝返回图片资源，这类情况需要你所在的站点配置代理转发图片请求即可解决。

for (var i = 0; i < data.result.length; i++) {
    var newRow = document.createElement('tr')
    newRow.classList.add('table-row')
    for (var j = 0; j < data.result[i].length; j++) {
        // 统一创建单元格元素
        var newCell = document.createElement('td');
        newCell.classList.add('col')
        if (j == 0){
            var img = document.createElement('img');
            // 注意此处需要替换为真正的图片直链
            img.src = data.result[i][j];
            img.style.width = '50px';
            img.style.height = '50px';
            // 图片插入单元格后再插入行
            newCell.appendChild(img);
        } else {
            newCell.innerHTML = data.result[i][j];
        }
        newRow.appendChild(newCell);
    }
    table[0].appendChild(newRow)
}

针对你使用的runescape维基站点，图片直链格式统一为https://oldschool.runescape.wiki/images/[文件名]，你可以从预览页URL中提取File:后的文件名，把空格替换为下划线后拼接为上述格式的直链，即可正常加载图片。

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