如何在 Flickr API 中仅显示多图像字段的 1 张图像？答案

【问题标题】：How to show only 1 image of multiple-image field in Flickr API?如何在 Flickr API 中仅显示多图像字段的 1 张图像？
【发布时间】：2016-10-28 22:52:30
【问题描述】：

我的代码在这个 codepen.io 链接中： http://codepen.io/ChocolateRoca/pen/jrpjPp

当我在搜索栏中输入随机城市名称时，代码使用城市名称作为标签通过 Flickr 的 API 查找相关图像。

Flickr API 链接：http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?

链接在其回调中以这种格式提供响应：

    jQuery31009750922804659352_1477691108443({
    "title": "Recent Uploads tagged boston",
    "link": "http://www.flickr.com/photos/tags/boston/",
    "description": "",
    "modified": "2016-10-28T22:36:35Z",
    "generator": "http://www.flickr.com/",
    "items": [
   {
        "title": "Wilmington, Vermont.....on the way to Boston",
        "link": "http://www.flickr.com/photos/mishlove1/30327590520/",
        "media": {"m":"http://farm6.staticflickr.com/5695/30327590520_a7e599c963_m.jpg"},
        "date_taken": "2016-10-03T07:44:18-08:00",
        "description": " <p><a href=\"http://www.flickr.com/people/mishlove1/\">mishlove1<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/mishlove1/30327590520/\" title=\"Wilmington, Vermont.....on the way to Boston\"><img src=\"http://farm6.staticflickr.com/5695/30327590520_a7e599c963_m.jpg\" width=\"240\" height=\"160\" alt=\"Wilmington, Vermont.....on the way to Boston\" /><\/a><\/p> <p>Wilmington, Vermont......on the road and on the way to Boston<\/p>",
        "published": "2016-10-28T22:36:35Z",
        "author": "nobody@flickr.com (mishlove1)",
        "author_id": "45049047@N04",
        "tags": "boston canada canon canon7d cityofboston jamaicaplain michaelishlove roadtrip usa"
   },
   {
        "title": "Wilmington, Vermont.....on the way to Bosto",
        "link": "http://www.flickr.com/photos/mishlove1/30510706342/",
        "media": {"m":"http://farm6.staticflickr.com/5720/30510706342_b9de69d877_m.jpg"},
        "date_taken": "2016-10-03T08:09:03-08:00",
        "description": " <p><a href=\"http://www.flickr.com/people/mishlove1/\">mishlove1<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/mishlove1/30510706342/\" title=\"Wilmington, Vermont.....on the way to Bosto\"><img src=\"http://farm6.staticflickr.com/5720/30510706342_b9de69d877_m.jpg\" width=\"240\" height=\"160\" alt=\"Wilmington, Vermont.....on the way to Bosto\" /><\/a><\/p> <p>Wilmington, Vermont.....on the road and on the way to Boston<\/p>",
        "published": "2016-10-28T22:36:34Z",
        "author": "nobody@flickr.com (mishlove1)",
        "author_id": "45049047@N04",
        "tags": "boston canada canon canon7d cityofboston jamaicaplain michaelishlove roadtrip usa"
   },....


 })

在代码中，此代码允许我显示 Flickr Api 和相关标签中的所有图像。

    function FlickerResponse(respond) {
    var photosHTML;
    var photosHTML = respond.items.reduce(function(InitialOrPrevious,CurrentValue) {
        InitialOrPrevious += [
            '<a href="', CurrentValue.link, '">',
            '<img src="' + CurrentValue.media.m + '">',
            '</a>'
        ].join(' ');

        return InitialOrPrevious;
    }, '');
    $("#quotediv").html(photosHTML);
  };

但我不知道如何只显示 API 链接中的第一张图片：我试过用“respond.items[0].link”和“respond.items[0].media.m”替换“CurrentValue.link”和“CurrentValue.media.m”，但它只重复图像，而不是打印 Flickr API 链接中的第一张（也是唯一一张）图像。

【问题讨论】：

可以直接用respond.items[0]访问第一个图片对象

标签： javascript jquery jquery-ui

【解决方案1】：

你得到的response在respond.items中有20个项目。

“快速而肮脏”的方式是改变：

respond.items.reduce(function...

收件人：

respond.items.slice(0,1).reduce(function...

这样你只取数组的第一个元素并在其上运行函数。

另一种选择是进行此更改：

var photo = respond.items[0]
var photoHTML = '<a href="'+ photo.link +'"><img src="'+ photo.media.m +'"></a>'
$('#quotediv').html(photoHTML);

这样你就不用在数组上运行函数，你只需拍摄第一张照片并从中创建你需要的 html。

【讨论】：