求助：HTML中本地JSON文件图片无法渲染，仅文本加载成功

• 检查JSON内的图片路径
  确保JSON里的图片路径是相对HTML文件的相对路径，比如HTML在根目录，图片存于./assets/文件夹下，JSON中就写"img": "./assets/photo.jpg"，避免使用本地绝对路径（如D:/images/xxx.jpg），浏览器网页环境不支持这类路径。

• 核对图片文件的实际位置
  对照JSON中的路径，确认图片文件存在于对应目录，文件名（含大小写）完全匹配——部分系统（如Linux）区分文件名大小写，Cat.jpg和cat.jpg会被视为不同文件。

• 动态渲染图片的代码正确性
  加载JSON后，动态生成<img>标签时，要正确将路径赋值给src属性，示例代码：

  // 假设已获取到JSON数据并存于data变量
  const contentBox = document.getElementById('content-container');
  data.forEach(item => {
    const imgElement = document.createElement('img');
    imgElement.src = item.imageUrl; // 对应JSON中的图片路径字段
    imgElement.alt = item.imageAlt;
    contentBox.appendChild(imgElement);
  });
  

• 解决本地文件协议的限制
  若直接双击打开HTML文件（使用file://协议），部分浏览器会限制本地资源加载。建议启动本地服务器运行，比如：

  • Python 3：执行python -m http.server命令
  • Node.js：安装http-server后执行http-server命令
    之后通过http://localhost:端口号访问HTML页面，即可正常加载图片。

内容的提问来源于stack exchange，提问作者Amit Kumar Bangal