从JSON加载的图片URL无法显示，寻求前端解决方案

我从服务器下载JSON数据，想以tile格式展示其中部分内容，为此做了个小型网站，但遇到图片无法加载的问题。我已经在测试环境试过图片链接，直接写入HTML的src属性里能正常显示，但通过JS动态生成的img标签就是加载不出来。

页面HTML代码 #

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <style></style>
  <body>
    <div class="weapons"></div>
  </div>
  <script async="" src="./js/main.js" type="module"></script>
  </body>
</html>

CSS样式代码 #

body {margin: 20px;padding: 20px;font-family: "Droid Sans";background-color: rgb(200, 200, 200);}
  a {text-decoration: none;color: inherit;}
  .main {position: sticky;top: 10px;right: 1vw;background-color: rgb(214, 214, 214);padding: 10px;color: rgb(0, 0, 0);border-radius: 5px;}
  .weapon-category {display: flex;}
  .weapon-category p {font-weight: bold;font-size: 0.9vw;}
  .weapon-item {flex: 1;max-width: 100%;background-color: rgb(222, 222, 222);margin: 3px;display: inline-block;text-align: center;text-decoration: none;border-radius: 10px;}
  .weapon-item p { text-align: center;}
  .weapon-item img {display: block;margin: 0 auto;max-width:90%;margin-bottom: 5px;}

主JS代码（main.js） #

import { weapon_list } from './weapons.mjs';

const normalize =(_) => _.toLowerCase().replace(/\s+/g, '-');

const handleWeapon = (data) => {
  gtaConsole.style.color = '#fff';
  gtaConsole.value += `${data.name}, ${data.image};\n`;
};

const weaponDom = document.querySelector('div.weapons');
for(const category in weapon_list) {
  const id = normalize(category);
  weaponDom.insertAdjacentHTML('beforeend', `
<h3>${category}</h3>
<div id="${id}" class="weapon-category">
</div>
<hr>
`);

  const categoryDom = document.querySelector('#' + id);
  weapon_list[category].map(weapon => {
    const id = normalize(weapon.name);
    categoryDom.insertAdjacentHTML('beforeend', `
<div class="weapon-item" id="${id}" data-name="${weapon.name}" data-image="${weapon.img}">
  <p>${weapon.name}</p>
  <img src="${weapon.img}">
</div>
`);
  });
}

数据模块（weapons.mjs） #

export const weapon_list = {
    'item' : [
         {
            "amount": 1,
            'img': "https://i.imgur.com/SGyP257.png",
            "name": "40-процентный раствор Глюкоза - 14 ампул",
            "weight": 0.01
         }],
};

排查与解决步骤 #

1. 修复HTML结构错误
   原HTML中<div class="weapons"></div>后多了一个多余的</div>，这会破坏DOM结构，导致后续元素渲染异常。修改后的body部分应为：

   <body>
     <div class="weapons"></div>
     <script async="" src="./js/main.js" type="module"></script>
   </body>
   

2. 检查控制台错误信息
   打开浏览器开发者工具（F12）的控制台，查看是否有CORS跨域错误、404资源未找到错误或其他加载异常。如果是CORS问题，需在图片所在服务器配置跨域允许规则，或使用代理中转请求。

3. 验证动态生成的src属性
   在Elements面板中找到动态生成的img标签，核对src属性与测试用的链接是否完全一致，检查是否存在字符转义错误或编码问题。

4. 确认模块路径正确性
   检查main.js中导入weapons.mjs的路径是否正确，确保文件实际存在于指定位置，避免因模块加载失败导致无法生成img标签。

5. 添加图片加载错误监听
   给动态生成的img标签添加错误监听，快速定位故障链接：

   // 修改生成img标签的代码
   categoryDom.insertAdjacentHTML('beforeend', `
   <div class="weapon-item" id="${id}" data-name="${weapon.name}" data-image="${weapon.img}">
     <p>${weapon.name}</p>
     <img src="${weapon.img}" onerror="console.error('图片加载失败:', this.src)">
   </div>
   `);
   

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