将 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>