Html 如何显示openweathermap天气图标

我正在使用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
                )

        )

)

现在如何显示图标：

[weather][0][icon]=>10d

---

什么是

10d

&如何获取图标的URL？

您可以通过此链接获取OpenWeatherMap API图标。你所需要做的就是调整这个链接中下面以粗体显示的图标id。您可以使用所需的任何图标id更改

10d

http://openweathermap.org/img/w/10d.png

---

有关更多信息，您可以在这里阅读

嗯，我知道一种使用jQuery的方法

  <div id="icon"><img id="wicon" src="" alt="Weather icon"></div>

之后，您应该将此var iconcode与包含图标的url连接起来，如：

        var iconurl = "http://openweathermap.org/img/w/" + iconcode + ".png";

最后，只需通过以下操作更改DOM中的src属性：

        $('#wicon').attr('src', iconurl);

---

我希望这能解决问题

非常感谢大家！我是一个非常初飞的程序员，想在Weatherapp中显示图标，我们与Angela Yu一起制作

我是在颤栗中这样做的：

String weerImageString;
weerImageString = weatherData['weather'][0]['icon'];

然后，如果我想让它展示，我做到了：

Image.network('http://openweathermap.org/img/w/$weerImageString.png',),

我希望有一天我能在这方面帮助别人。而且。。。如果有更简单的方法，我很想听

这对我有用

创建变量以访问javascript和HTML之间的数据。
var var1=document.querySelector（'idhere'）//您必须使用父类/id

从JASON获取图标
var tempvariable=data['weather'][0]['icon']

将链接和html标记一起传递到html
var1.innerHTML=”http://openweathermap.org/img/w/“+tempvariable+”.png'alt='Icon描述当前天气。“>”

或

---

var1.innerHTML=”http://openweathermap.org/img/w/“+data['weather'][0]['icon']+.”.png'alt='icon描述当前天气。>”//如果使用此方法，则不需要执行步骤2

所以我花了很多时间解决这个问题。这个答案适用于纯HTML和JavaScript，如果您不想使用jquery

1-在程序中包含“图标”文件：

2-在index.html中：

<div class="weather-icon"><img src="icons/unknown.png" /></div>

3-在JavScript文件中（在JS代码中遵循以下3个步骤）：

<div class="weather-icon"><img src="icons/unknown.png" /></div>

第一步：

let locationIcon=document.querySelector（“.weather icon”）

第二步：
const{icon}=data.weather[0]

第三步（不是以代码格式，因为它会使backticks部分消失）：

locationIcon.innerHTML=

对我来说很好。
快乐大厦。
对于react，您可以这样使用：

http://openweathermap.org/img/wn/10d@2x.png

步骤1：初始化空白状态

constructor(){
    super()
        this.state={
            icon:''
        }
    }

步骤2：api调用

async componentDidMount(){
            const url = 'http://api.openweathermap.org/data/2.5/'
            const key = 'your api key'
            const response = await fetch(`${url}weather?q=Guwahati&units=metric&APPID=${key}`)
            const data = await response.json() //this will return the json response
            const iconName = data.weather[0].icon // this will hold the icon
            const iconApi = await fetch('http://openweathermap.org/img/w/' + iconName + '.png')
            this.setState({
                icon : iconApi.url
            })
        }
    

步骤3：显示图标

    <div className="weather-icon">
         <img style={{width:'70px'}} src= {this.state.icon} />
    </div>


这里d指白天，而n指夜晚。
根据天气状况，它会发生变化，例如，零散云的03d，晴空的01d等。
在这里，您将获得这些图标的完整列表
此代码在React Native中适用于我：

const icon = wInfo.weather[0].icon; // For instance "09d"
<Image source={{ uri: ``http://openweathermap.org/img/w/${icon}.png`` }} />

const icon=wInfo.weather[0]。icon；//例如“09d”
图标的src如下所示：

http://openweathermap.org/img/wn/10d@2x.png

请参见

要在网页上显示它，只需将其添加到img标记的
src
属性中即可

这就是获取图标的URL的样子。。。。
其中
weatherData
是从对OPENWEATHERMAP进行的API调用中获得的数据。它是JSON格式的。你需要分析。
从你删除的问题中检查这个问题。我一直在努力理解你的第3步。。但最后我想它是好的，它是有效的，谢谢你，我相信你说的是第三步中的第三步。我仍然不确定stackoverflow上的代码插入功能是否允许您使用backticks（我们通常在JavaScript中使用）键入代码。第三步的第三部分需要HTML图像元素的backticks。像这样
locationIcon.innerHTML=``在设置JS的第三部分中，步骤2不应该在步骤1之前吗？因为icon的变量需要先初始化。我还建议对代码的“第二步”进行编辑，将其更改为
const icon=data.weather[0].icon
，因为它是一个数组，包含一个对象和我们试图获取的icon属性。