OpenWeatherMap接口返回数据后自定义图标无法正常切换更新问题

问题排查与修复方案 #

问题核心出在变量作用域和DOM变量误用两点，具体错误及修复如下：

• 变量作用域错误：你在第二个then回调里用const声明的icon是块级作用域变量，后续第三个then的回调不在它的作用域范围内，访问时会直接抛出icon未定义的错误，无法正常拼接进图片链接。
• DOM引用被覆盖：你把原本指向页面DOM节点的locationIcon变量直接赋值为天气图标编码字符串，覆盖了原来的DOM引用，后续操作locationIcon.innerHTML本质是在给字符串加属性，完全不会作用到页面节点上。
• 冗余逻辑问题：多余的then链式调用没有必要，所有数据处理和DOM更新逻辑都可以合并到拿到接口返回数据的回调里，减少异步逻辑出错概率。

修正后的代码示例 #

// 提前获取好DOM节点，避免后续覆盖引用
const locationIconDOM = document.querySelector('替换为你实际的天气图标节点选择器');
const temperatureDescription = document.querySelector('替换为你实际的温度描述节点选择器');
const temperatureDegree = document.querySelector('替换为你实际的温度数值节点选择器');
const locationTimezone = document.querySelector('替换为你实际的地区节点选择器');

fetch(api)
   .then(response => response.json())
   .then(data => {
       console.log(data.weather[0].icon);
       const {temp} = data.main;
       const {description, icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       // 直接在这里更新图标DOM，不需要额外链式调用then
       locationIconDOM.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png" alt="天气图标">`;
       displayWeather();
    });
})();

额外排查提示 #

如果修改后仍然不显示，可以优先排查两个点：

1. 确认Cloudinary上的图标文件名和OpenWeatherMap返回的icon值完全一致，包括大小写、后缀名
2. 打开浏览器开发者工具的控制台，查看是否有变量未定义、DOM节点获取失败、图片资源404之类的报错信息

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