如何在Javascript中从“打开天气地图”显示天气图标

Question

所以我一直在使用来自Open Weather Map（https://openweathermap.org/api）的公共API进行一个班级项目。

我可以获得温度值，但似乎无法显示图标。我阅读了文档，但听不懂。

代码

<input id="city">
<button id="getWeatherForcast">GET WEATHER</button>
<div class="ShowWeatherForcast"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#getWeatherForcast").click(function() {

      var city = $("#city").val();
      var key = '4de3768c62b67fe359758977a3efc069';

      $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather',
        dataType: 'json',
        type: 'GET',
        data: {
          q: city,
          appid: key,
          units: 'metric'
        },
        success: function(data) {
          var wf = '';
          $.each(data.weather, function(index, val) {

            wf += '<p><b>' + data.name + "</b><img src=" + val.icon + ".png></p>" + data.main.temp + '&deg;C ' +
              ' | ' + val.main + ", " + val.description

          });

          $(".ShowWeatherForcast").html(wf);
        }
      })
    });
  });
</script>