javascript - How to assign JSON image value to HTML img tag -


this full url displays image.

http://openweathermap.org/img/w/04d.png

note json property "icon" provides value "04d" , it's me throw url in order use it.

just reference, show json path correct, here how displayed text same json property image stored in.

document.getelementbyid("weatherdescriptiondata").innerhtml = data.weather[0].description;

this html img tag

<img src="" id="weathericondata"></div>

this first method tried unsuccessfully show image. (scroll right)

document.getelementbyid("weathericondata").src = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";

this second method tried unsuccessfully show image.

$("#weathericondata").prop('src', "http://openweathermap.org/img/w/" + data.weather[0].icon  + ".png");

i checked , found 

console.log(data.weather[0].icon);

does in fact return 04d.

how 1 display image provided in json in html view?

try jquery .attr

$("#weathericondata").attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon  + '.png');

your html tag starts <img> closes </div> close <img id="" src="" />

$(function() {    var data = {      weather: [{        icon: '04d'      }]    };        $("#weathericondata").attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png');  });
<!doctype html>  <html>  <head>  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>js bin</title>  </head>  <body>  <img src="" id="weathericondata"/>  </body>  </html>


Comments

Post a Comment