Html 如何显示openweathermap天气图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44177417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to display openweathermap weather icon
提问by Ajay Krishna Dutta
I am using openweathermap to display weather reports. Everything is working fine but there is a problem with the icon . The json response code are :
我正在使用 openweathermap 来显示天气报告。一切正常，但图标有问题。json响应代码是：
Array
(
[city] => Array
(
[id] => 1271476
[name] => Guwahati
[coord] => Array
(
[lon] => 91.751
[lat] => 26.1862
)
[country] => IN
[population] => 899094
)
[cod] => 200
[message] => 0.0630711
[cnt] => 1
[list] => Array
(
[0] => Array
(
[dt] => 1495688400
[temp] => Array
(
[day] => 33
[min] => 24.89
[max] => 33.82
[night] => 24.89
[eve] => 30.6
[morn] => 33
)
[pressure] => 1013.02
[humidity] => 90
[weather] => Array
(
[0] => Array
(
[id] => 500
[main] => Rain
[description] => light rain
[icon] => 10d
)
)
[speed] => 3.92
[deg] => 88
[clouds] => 24
[rain] => 2.73
)
)
)
Now how can I display the icon : [weather] [0] [icon] => 10d
现在如何显示图标：[天气] [0] [图标] => 10d
what is 10d & how can I got the url of the icon.
什么是 10d 以及如何获得图标的网址。
回答by samu101108
Well, I know an way using jQuery.
好吧，我知道一种使用 jQuery 的方法。
<div id="icon"><img id="wicon" src="" alt="Weather icon"></div>
At the HTML above you see the unique thing missing is the src attribute, so let's fill it with some jQuery and JavaScript. You may create a variables to hold the icon code provided by the API like:
在上面的 HTML 中，您会看到唯一缺少的是 src 属性，所以让我们用一些 jQuery 和 JavaScript 来填充它。您可以创建一个变量来保存 API 提供的图标代码，例如：
var iconcode = a.weather[0].icon;
After it you should concatenate this var iconcode with the url that contains the icons, like:
之后，您应该将此 var iconcode 与包含图标的 url 连接起来，例如：
var iconurl = "http://openweathermap.org/img/w/" + iconcode + ".png";
Finally just change src attribute in the DOM by doing this:
最后只需通过执行以下操作更改 DOM 中的 src 属性：
$('#wicon').attr('src', iconurl);
I hope this solve the issue. :)
我希望这能解决问题。:)
回答by Mukhammad Ali
You can get OpenWeatherMap API icons through this link. All you need to do is that moderate the icon id given in bold below in this link. You can change 10dwith any icon id that you need. http://openweathermap.org/img/w/10d.png
您可以通过此链接获取 OpenWeatherMap API 图标。您需要做的就是调整此链接下面以粗体显示的图标 ID。您可以使用您需要的任何图标 ID更改10d。 http://openweathermap.org/img/w/ 10d.png
For more information, You can read here OpenWeatherMap Icons
有关更多信息，您可以在这里阅读OpenWeatherMap 图标
回答by Margriet
Thank you all very much! I am a very beginning Flutter programmer and wanted to display the Icon in the Weatherapp, we made on course with Angela Yu.
非常感谢大家！我是一名 Flutter 初学者，想在 Weatherapp 中显示图标，这是我们与 Angela Yu 一起制作的。
I did this in Flutter:
我在 Flutter 中这样做了：
String weerImageString;
weerImageString = weatherData['weather'][0]['icon'];
and then were I wanted it to display, I did:
然后我想要它显示，我做到了：
Image.network('http://openweathermap.org/img/w/$weerImageString.png',),
I hope that I can someday helping someone with this. And... if there is an easier way, I would love to hear!
我希望有一天我能帮助别人解决这个问题。而且......如果有更简单的方法，我很乐意听到！
回答by arnab das
Get the icon data in json format and store it in a string type variable.
append and store the variable with a link like the following- (replace your variable with variable)
'http://openweathermap.org/img/w/variable.png'send it to html and use it in img tag and src = that variable
#using python get the icon value and append with a link(back end) icon = data['weather'][0]['icon'] ---------- icon= ('http://openweathermap.org/img/w/{}.png').format(icon) #in html(front end) ---------- img src="{{icon}}"
获取json格式的图标数据，存放在字符串类型变量中。
使用如下链接附加和存储变量 - （用变量替换变量）
'http://openweathermap.org/img/w/variable.png'将它发送到 html 并在 img 标签和 src = 该变量中使用它
#using python get the icon value and append with a link(back end) icon = data['weather'][0]['icon'] ---------- icon= ('http://openweathermap.org/img/w/{}.png').format(icon) #in html(front end) ---------- img src="{{icon}}"
