如何将来自weatherapi.com的图标集成到我的代码中

Question

之前我使用 OpenWeatherAPI，对于我的图标代码，它看起来像这样：

const { icon, description } = data.weather[0];
&
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + ".png";

现在我正在尝试对weatherapi.com做同样的事情，我的代码如下所示：

const { icon } = data.current.condition.icon;
&
document.querySelector(".icon").src = "//cdn.weatherapi.com/weather/64x64/" + icon + "/113.png"

但这不起作用。我相信我正在从源正确访问数据，请参阅 http://api.weatherapi.com/v1/forecast.json?key=c014ca23bca74b9f82f130128222406&q=seattle&days=1&aqi=no&alerts=no 获取示例 json 文件 但也许 queryselector 行是错误的。不知道如何解决。

Answer 1

您获取图像的网址不正确。首先，我发现您需要在字符串开头的

https:

之前添加

//

来定义协议。 其次，在

/64x64/

和

/113.png

之间，应该是

day

或

night

，而不是图像的编号。固定字符串看起来像这样：

"https://cdn.weatherapi.com/weather/64x64/day/" + icon + ".png"

如果这仍然不起作用，我建议将图标的 zip 下载到本地计算机并从那里访问它们。该 zip 的链接可以在 https://www.weatherapi.com/docs/ 的底部找到，并且是 https://cdn.weatherapi.com/weather.zip