如何从openweathermap正确检索天气应用程序的图标？

Question

<article>
        <br/><br/>

    <div class = "resultats">

            <label> Weather : </label>
            <img src ="http://openweathermap.org/img/w/{{weather.icon}}.png">

            <p> {{ weather.weather[0].description }}</p> 
            <p>Wind speed (meter/sec): {{ weather.wind.speed }}</p>
            <span class="temperature">Temperature (Fahrenheit): {{ ((weather.main.temp) -273.15)*1.8+32 }} </span>
            <br/>
            <span class="temperatureCelsius">Temperature (Celsius): {{ ((weather.main.temp) -273.15) }} </span>
    </div>
    <br/><br/>
</article>

此代码获取所有信息，但是我没有图标结果。我认为这是网址链接写的不正确。

Answer 1

在组件文件中，使用插值声明图标源字符串：

iconSrc: string  = `http://openweathermap.org/img/w/${weather.icon}.png`;

然后在您的模板中使用绑定：

<img [src]="iconSrc" />

在图像标签的src属性之后，您还有一个多余的空间，删除该空间也可以解决该问题。