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

This is the full url that successfully displays the image.

.png

Note than the JSON property "icon" provides the value "04d" and it's up to me to throw that into a url in order to use it.

Just as a reference, to show that the JSON path is correct, here is how I successfully displayed text from the same JSON property that the image is stored in.

document.getElementById("weatherDescriptionData").innerHTML = data.weather[0].description;

This is the HTML img tag

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

This is the first method I tried unsuccessfully to show the image. (scroll right)

document.getElementById("weatherIconData").src = "/" + data.weather[0].icon + ".png";

This is the second method I tried unsuccessfully to show the image.

$("#weatherIconData").prop('src', "/" + data.weather[0].icon  + ".png");

I checked and found that

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

does in fact return 04d.

How would one display the image provided in the JSON in an HTML view?

This is the full url that successfully displays the image.

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

Note than the JSON property "icon" provides the value "04d" and it's up to me to throw that into a url in order to use it.

Just as a reference, to show that the JSON path is correct, here is how I successfully displayed text from the same JSON property that the image is stored in.

document.getElementById("weatherDescriptionData").innerHTML = data.weather[0].description;

This is the HTML img tag

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

This is the first method I tried unsuccessfully to show the image. (scroll right)

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

This is the second method I tried unsuccessfully to show the image.

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

I checked and found that

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

does in fact return 04d.

How would one display the image provided in the JSON in an HTML view?

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Mar 26, 2016 at 13:48 PencilCrate 2111 gold badge4 silver badges14 bronze badges

@PencilCreate I edited @user6101582's answer to add some more detail. The accepted answer may work but it's not the correct solution since it works around a problem that wasn't really understood. There's no reason why $('#id') should be used over document.getElementById('id') – Ruan Mendes Commented Aug 25, 2016 at 19:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

try jquery .attr

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

your html tag also starts as an <img> but closes with </div> close this with <img id="" src="" />

$(function() {
  var data = {
    weather: [{
      icon: '04d'
    }]
  };
  
  $("#weatherIconData").attr('src', 'http://openweathermap/img/w/' + data.weather[0].icon + '.png');
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery./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>

You did not close the <img /> tag.

<img id="weatherIconData" />

jQuery may have worked around the problem but is not the correct solution as @user2950720 suggested. There's no reason why $('#id') should be used over document.getElementById('id')

var data = {
  weather: [{
    icon: '04d'
  }]
};

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

<img src="" id="weatherIconData">

Use attr over prop . Working Fiddle

$("#weatherIconData").attr('src', "....");

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

3 Answers 3

与本文相关的文章

评论列表(0)