如何在前端代码中正确集成weatherapi.com的天气图标

你的代码失效和querySelector没有关系，存在两处核心逻辑错误：

• 解构赋值写法错误：WeatherAPI返回的数据结构中，data.current.condition是存储天气状态信息的对象，icon是该对象下的字符串类型属性，本身不是可解构的对象。你写的const { icon } = data.current.condition.icon，本质是尝试从字符串值中解构icon属性，最终拿到的永远是undefined。
• 图标URL拼接逻辑错误：接口返回的icon字段本身就是带尺寸、天气状态编号、文件后缀的完整相对协议路径，不需要手动拼接固定的/113.png后缀——113仅对应晴天状态的图标编号，硬编码该值会导致所有天气场景都加载错误的资源。

接口返回的condition字段结构参考如下：

{
  "text": "Sunny",
  "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
  "code": 1000
}

直接使用正确的解构逻辑，赋值时直接使用接口返回的完整icon路径即可，无需额外拼接：

// 从condition对象中解构icon属性
const { icon } = data.current.condition;
// 直接将返回的路径赋值给图片src
document.querySelector(".icon").src = icon;

如果你需要切换图标尺寸（比如使用128x128分辨率的图标），可以通过字符串替换实现，不需要手动拼接全路径：

const { icon } = data.current.condition;
// 将路径中的默认64x64替换为目标尺寸
document.querySelector(".icon").src = icon.replace("64x64", "128x128");

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