gpt4 book ai didi

javascript - 解析 json 并在弹出窗口中显示图像

转载 作者:行者123 更新时间:2023-12-02 19:51:59 25 4
gpt4 key购买 nike

我正在尝试用 javascript 为 chrome 编写一个 xkcd 扩展。为了获取最新图像的 url,我从 http://dynamic.xkcd.com/api-0/jsonp/comic/ 获取 JSON并尝试解析它。显然,这不太有效。

json 解析不正确,弹出窗口中显示的硬编码 url 中的图像也没有正确显示。我该如何解决这些问题?

所以我的问题是:

  1. 如何从 json 中检索图像 url?

  2. 如何将图像插入弹出窗口?

这是我的代码:(我遵循了教程,这就是为什么仍然存在一些闪烁片段的原因......)

manifest.json:

{
"name": "xkcd extension",
"version": "1.0",
"description": "The first xkcd extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"http://www.xkcd.com/"
]
}

popup.html:

<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width:357px;
overflow-x:hidden;
}

img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:300px;
height:300px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
showPhotos();

function showPhotos() {
// var url="http://xkcd.com/info.0.json";
var url = "http://dynamic.xkcd.com/api-0/jsonp/comic/";
alert(url);
// var imgURL;
// $.getJSON(url, function(data) {
// alert(data.img);
// imgURL=data.img;
// });
//alert(imgURL);

var img = document.createElement("image");
alert(img);
img.src = 'http://imgs.xkcd.com/comics/wrong_superhero.png';
alert(img.src);
document.body.appendChild(img);
}

</script>
</head>
<body>
<div id="result">
</div>
</body>
</html>

最佳答案

var img = document.createElement("image");

应该是

var img = document.createElement("img");

关于javascript - 解析 json 并在弹出窗口中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9150824/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com