动态创建Img元素无显示且无控制台错误的技术问题求助

问题概述 #

控制台无报错，但动态创建的img元素在页面完全不可见，本地图片和替换后的在线图片均无法显示，相关代码及文件信息如下：

核心JS代码 #

const pics = document.querySelector('.gridPics');

eventosListener();

function eventosListener() {
    document.addEventListener('DOMContentLoaded', () => {
        jsonFile();
    });
}

function jsonFile () {
    fetch('js/fotos.json')
    .then(response => {
        if (!response.ok) {
            throw new Error(response.status);
        }
        return response.json();
    })
    .then(data => {
        showPics(data);
    })
    .catch(function () {
        this.dataError = true;
    })
}

function showPics(x) {
    x.forEach(element => {
        const div = document.createElement('div');
        div.classList.add('grid-item');

        const imagen = document.createElement('img');
        imagen.setAttribute("src", element.name);
        imagen.setAttribute("alt", element.desc);
        imagen.setAttribute("width", '90%');

        div.appendChild(imagen);
        pics.appendChild(div);
    });  
}

HTML结构 #

<section class="fotos">
     <div class="gridPics"></div>
</section>

JSON数据示例 #

[{
  "name" : "./../assets/1.jpeg",
  "desc": "imagen1"
  },...
}]

已做排查 #

• 替换为在线图片地址仍无法显示
• 控制台无任何报错信息

排查步骤及解决方案 #

1. 确认DOM元素是否生成 #

打开浏览器开发者工具（F12）的Elements面板，查看.gridPics下是否存在动态生成的.grid-item和img元素：

• 若未生成，说明showPics未执行：
  • 在jsonFile的.then(data => {})中添加console.log(data)，确认JSON数据是否正常返回
  • 全局作用域的pics变量可能因HTML加载顺序问题变为null，建议将其移到DOMContentLoaded事件内：

    function eventosListener() {
        document.addEventListener('DOMContentLoaded', () => {
            const pics = document.querySelector('.gridPics');
            jsonFile(pics);
        });
    }
    // 同步修改jsonFile和showPics的参数传递逻辑
    

2. 检查img的src属性有效性 #

若Elements面板存在img元素，查看其src属性：

• 本地图片路径：根据文件结构，./../assets/1.jpeg会指向根目录的上级（不存在），应改为./assets/1.jpeg或assets/1.jpeg
• 在线图片：直接使用imagen.src = "在线地址"赋值，替代setAttribute避免潜在属性设置问题

3. 排查CSS样式隐藏问题 #

检查.gridPics、.grid-item的CSS样式：

• 是否设置了display: none、visibility: hidden或opacity: 0
• 是否存在布局异常（如.grid-item宽高为0）：可临时给.grid-item添加div.style.border = "1px solid red"，确认元素是否存在

4. 完善fetch错误捕获 #

当前catch逻辑未输出错误，可能fetch失败未被察觉，修改如下：

.catch(error => {
    console.error('数据获取失败:', error);
    this.dataError = true;
})

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