linking png image from json to html

Question

As I'm sure you're about to see for yourself, I'm relatively new at coding. I've been struggling to get the png image from json file to show up on my codepen. I've already tried several suggestions I found in my Stackoverflow searches but nothing I've tried seems to work for my situation.

Here's the link to my codepen: http://codepen.io/mbabaian/pen/MpjbZv

The code I'm trying to use to get the image at this time is:

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

And here's the particular json data where the image is located:

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

Please let me know if you need any additional information from me about this. Thanks in advance.

score 2 · Answer 1 · answered Mar 09 '17 at 15:20

2

Simply use

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

Here is your updated codepen

answered Mar 09 '17 at 15:20

Weedoze

13,683
1
33
63

Thank you! Simple fix, too. – txlibrarycoder Mar 09 '17 at 16:03

score 1 · Answer 2 · edited Mar 09 '17 at 15:53

1

You create currentIcon, use it

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

edited Mar 09 '17 at 15:53

Funk Forty Niner

74,450
15
68
141

answered Mar 09 '17 at 15:23

Insou

1,303
1
13
17

Ha! It was the + I was missing. Thanks :) – txlibrarycoder Mar 09 '17 at 16:03

linking png image from json to html

2 Answers2