javascript - 如何从 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>

此代码获取所有信息，但我没有图标结果。我认为是 URL 链接写错了。

Answer 1

在您的组件文件中，声明带插值的图标源字符串:

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

然后在您的模板中使用绑定(bind):

<img [src]="iconSrc" />

此外，您在图片标签中的 src 属性后还有一个额外的空格，删除它也可以解决问题。