解析json並在popop中顯示圖像

我正在嘗試在javascript中爲Chrome編寫一個xkcd擴展。要獲取最新圖像的網址，我從http://dynamic.xkcd.com/api-0/jsonp/comic/獲取JSON並嘗試解析它。顯然，這並不奏效。解析json並在popop中顯示圖像

無論是json解析正確，也沒有從彈出窗口中顯示的硬編碼URL的圖像。我該如何解決這些問題？

所以我的問題是：

我怎樣才能檢索JSON的圖像網址是什麼？
如何將圖像插入彈出窗口？

這裏是我的代碼：（我也跟着教程，這就是爲什麼有仍然留下了一些閃爍的片段...）

在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/" 
] 
}

彈出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>

來源

2012-02-05 bogus

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

絕對應該

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

來源

2012-02-05 16:30:30

謝謝，我改變了這一點。但是，爲什麼漫畫不顯示？ – bogus 2012-02-05 16:37:22

我知道[此線程]（http://stackoverflow.com/questions/9140632/parse-json-from-url），但由於未知原因getJSON只是不給我想要的屬性 – bogus 2012-02-05 17:19:59

行，其他的一點是，在你的DOM（特別是「document.body」）準備就緒之前，你正試圖調用'showPhotos（）**。而不是直接調用'showPhotos（）'，而是在一個'onload'處理函數中調用它：'> - 這對我有用。 – 2012-02-06 07:23:48

解析json並在popop中顯示圖像

回答

相關問題