將json鏈接到png圖像到html

Question

因爲我相信你會親自看到，我在編碼方面相對較新。我一直在努力從json文件中獲取png圖像以顯示在我的codepen上。我已經嘗試了幾次在我的Stackoverflow搜索中找到的建議，但我沒有試過似乎適用於我的情況。

這裏的鏈接到我的codepen： http://codepen.io/mbabaian/pen/MpjbZv

我試圖用這個時間來獲取圖像的代碼是：

var currentIcon = wd.current.condition.icon; 
     // weather icon settings 
    $("#current-icon").html("<img src='wd.current.condition.icon' alt='weather icon'/> "); 

而這裏的特定的JSON數據在圖像位於：

https://api.apixu.com/v1/current.json?key=68629a769f564f9bb6450153170703&q=auto:ip 

請讓我知道你是否需要任何額外的信息從我這裏。提前致謝。

Answer 1

只需使用

$("#current-icon").html("<img src='"+wd.current.condition.icon+"' alt='weather icon'/> "); 

這裏是你的更新codepen

Answer 2

創建currentIcon，用它

$("#current-icon").html('<img src="'+currentIcon+'" alt="weather icon"/>');