新窗口添加图片仅显示alt文本且控制台无法查看图片问题求助

你的问题：通过window.open创建新窗口后，动态添加的图片仅显示alt文本，且在开发者工具Sources面板找不到对应图片文件。

相关代码：

var popup = window.open('', popupName, 'width=600,height=600');

var image = popup.document.createElement('img');
image.src = '../img/' + id + '.png';
image.alt = 'Product Image';
headerDiv.appendChild(image);

以下是具体排查和解决步骤：

• 修正图片路径解析问题
  相对路径../img/是基于当前父页面的URL解析，但新窗口初始URL为空，会导致路径基准混乱。直接改用绝对路径，比如从网站根目录开始：

  image.src = `${window.location.origin}/img/${id}.png`;
  

  或者明确基于父页面的路径拼接：

  image.src = new URL(`../img/${id}.png`, window.location.href).href;
  

• 验证图片文件真实存在
  直接在浏览器地址栏输入你预期的图片完整URL（比如http://你的域名/img/123.png），如果无法打开，说明：

  • 文件名/路径拼写错误（注意Linux服务器区分大小写）
  • 文件未上传到对应目录
  • 服务器权限限制，无法访问该文件

• 检查新窗口DOM与请求状态
  打开新窗口后右键「检查元素」，查看<img>标签的src属性是否正确生成；切换到Network面板，筛选图片类型请求，看该图片的请求状态是404（路径错误）还是其他异常。

• 解决Sources面板找不到文件的问题
  如果图片路径正确但Sources面板没显示，右键Sources面板选择「Refresh」刷新；或者直接在Network面板找到该图片请求，右键选择「Open in Sources panel」定位文件。若Network里也找不到请求，说明图片元素根本没触发加载（比如DOM未正确挂载）。

• 确保新窗口文档初始化完成
  空URL的新窗口文档可能未完全初始化，导致DOM操作失效，先写入基础HTML结构再操作：

  popup.document.write('<html><head></head><body><div id="header"></div></body></html>');
  popup.document.close();
  var headerDiv = popup.document.getElementById('header');
  // 再创建并添加图片元素
  

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