將 JSONP 與 flickr api 結合使用

Question

我從 FLICKR api 得到了這個 JSONP 響應，我想用“鏈接”作為每個人的源來創建。 我嘗試這樣做，但什么也沒發生。 我寫了一個

<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>

javascript：

function jsonFlickrFeed(data)
{
  for(var a = 0 ; a < 5 ; a++)
  {
    var img = document.createElement(img);
    img.src = data.items[i].link;
  }
}

然后

jsonFlickrFeed({
        "title": "Uploads from everyone",
        "link": "https://www.flickr.com/photos/",
        "description": "",
        "modified": "2015-09-22T22:17:01Z",
        "generator": "https://www.flickr.com/",
        "items": [
       {
            "title": "بالصور| أفضل الفنادق في مراكش",
            "link": "https://www.flickr.com/photos/131615921@N08/21014053604/",
            "media": {"m":"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg"},
            "date_taken": "2015-09-22T15:17:01-08:00",
            "description": " <p><a href=\"https://www.flickr.com/people/131615921@N08/\">www.7aya.net<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/131615921@N08/21014053604/\" title=\"بالصور| أفضل الفنادق في مراكش\"><img src=\"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg\" width=\"240\" height=\"149\" alt=\"بالصور| أفضل الفنادق في مراكش\" /><\/a><\/p> <p>قدم موقع التلغراف في قسمه المخصص للسفر قائمة بأفضل الفنادق في مدينة مراكش المغربية، وقد شملت القائمة الفنادق الفاخرة و الفنادق الرخيصة والفنادق الصديقة للعائلة، وبينما تظهر المزيد من الفنادق الجديدة في جميع أنحاء المدينة، تم تحويل أكثر من 200 من رياض المدينة إلى بيوت الضيافة، وفيما يلي 10 من أفض... <br /> <br /> <a href=\"http://www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a3%d9%81%d8%b6%d9%84-%d8%a7%d9%84%d9%81%d9%86%d8%a7%d8%af%d9%82-%d9%81%d9%8a-%d9%85%d8%b1%d8%a7%d9%83%d8%b4/\" rel=\"nofollow\">www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8...<\/a><\/p>",
            "published": "2015-09-22T22:17:01Z",
            "author": "nobody@flickr.com (www.7aya.net)",
            "author_id": "131615921@N08",
            "tags": ""
       },
       {
            "title": "Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me",
            "link": "https://www.flickr.com/photos/46158081@N07/21014054554/",
            "media": {"m":"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg"},
            "date_taken": "2015-09-22T17:17:04-08:00",
            "description": " <p><a href=\"https://www.flickr.com/people/46158081@N07/\">puente sur<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/46158081@N07/21014054554/\" title=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\"><img src=\"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg\" width=\"240\" height=\"240\" alt=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\" /><\/a><\/p> ",
            "published": "2015-09-22T22:17:04Z",
            "author": "nobody@flickr.com (puente sur)",
            "author_id": "46158081@N07",
            "tags": "square squareformat iphoneography instagramapp uploaded:by=instagram"
       }]}

Answer 1

原代碼有幾個問題：

• items[i]指的是undefined i ，因為您正在循環a 。
• 每個數據項上的link屬性是指向包含圖像的 HTML 頁面的鏈接，而不是圖像本身的src 。 您可能想要使用media屬性，它是圖像的直接鏈接。
• img在創建圖像元素時需要引號
• 您永遠不會將創建的元素添加到 DOM

http://jsfiddle.net/rmuctcp/

<script>
function jsonFlickrFeed(data)
{
  for(var i = 0 ; i < 5 ; i++)
  {
    var img = document.createElement("img");
    img.src = data.items[i].media.m;
    document.body.appendChild(img);
  }
}
</script>
<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>