从 json 解析图像
Posted
技术标签:
【中文标题】从 json 解析图像【英文标题】:parse image from json 【发布时间】:2012-12-31 16:03:50 【问题描述】:http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/IA/Cedar_Rapids.json
这是获取爱荷华州锡达拉皮兹天气状况的 .json 文件。 在这个 json 文件中,有一个变量给出了天气图标的条件。 我想看看使用 ID 将此图像放入 html 中。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1 id='meteo'></h1>
<script type="text/javascript">
jQuery(document).ready(function($)
var state = 'CA';
var city = 'San_Francisco';
var URL = 'http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/' + state + '/' + city + '.json';
$.ajax(
url : URL,
dataType : "jsonp",
success : function(parsed_json)
var location = parsed_json['location']['city'];
var temp = parsed_json['current_observation']['temperature_string'];
var wicon = parsed_json['current_observation']['icon_url'];
$("#meteo").text(temp);
);
);
</script>
</body>
what can i do
</html>
【问题讨论】:
【参考方案1】:作为脚本的最后一行,添加:
$("#meteo").append('<img src="' + wicon + '"/>");
【讨论】:
【参考方案2】:只需创建一个具有正确 src 属性的 img 标签。
$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );
演示:http://jsfiddle.net/dAz2p/
【讨论】:
【参考方案3】:在页面上放置一个图像元素(比如 id Image1),然后:
success: function (parsed_json)
var location = parsed_json['location']['city'];
var temp = parsed_json['current_observation']['temperature_string'];
var wicon = parsed_json['current_observation']['icon_url'];
$("#meteo").text(temp);
$("#Image1").attr("src", wicon);
【讨论】:
【参考方案4】:请添加具有正确属性的图像标签。
$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );
检查自己:http://jsfiddle.net/dAz2p/
【讨论】:
【参考方案5】:您只需将wicon
分配给占位符图像的src
属性
编辑:按要求编写代码。
首先,在要显示最终图标的位置放置一个占位符图片:
...
<img id='meteo_icon' src='meteo_loading.png'>
<h1 id='meteo'></h1>
...
然后,在分配文本的时候,还要分配src:
...
$("#meteo").text(temp);
$("#meteo_icon").attr("src", wicon);
...
【讨论】:
以上是关于从 json 解析图像的主要内容,如果未能解决你的问题,请参考以下文章
如何使用json解析android在listview中获取图像