从API渲染图像

Question

<div class="row box">
  <div class="col-md-4 pic"></div>
  <div id="temperature" class="col-md-4 change make_blue bigger_text">
    Placeholder
  </div>
  <div class="col-md-4">
    <button id="getChange" class="make_orange bigger_text">Change units</button>
  </div>
</div>
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(function(position) {
var url = "https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude;
   $.ajax({
     url:"https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon="+ position.coords.longitude,
    success: function(data) {
        var temp = data.main.temp;
        var icon = data.weather[0].icon;
        $(".pic").html(icon);
        $(".change").html(temp);
      $("#getChange").on("click", function() {
        $(".change").html(temp);
        $("#temperature").html(changeTemp(temp));
   });
      }
    });
 });
});

我无法将“icon”变量渲染到id =“pic”的元素中。有什么建议让它起作用吗？在此先感谢您的帮助。

Answer 1

试试这个图片：

var img = new Image();
img.src = icon;
$(".pic").append(img);