admin管理员组

文章数量:1405188

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?

  • javascript
  • html
  • json
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Mar 26, 2016 at 13:48 PencilCratePencilCrate 2111 gold badge4 silver badges14 bronze badges 1
  • @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

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', "....");

本文标签： javascriptHow to assign JSON image value to HTML img tagStack Overflow

版权声明：本文标题：javascript - How to assign JSON image value to HTML img tag - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744876810a2629963.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。