Imgur API GET图像问题

Question

这是我第一次使用这个网站,但是我已经用尽了大部分资源来寻找答案.我正在教自己如何编程,而且我被困在我的第一个API项目上.

作为总体目标,我想建立一个网站,允许您输入特定标准并搜索所有imgur的壁纸.只是为了在我的投资组合上有一个API项目.

为了达到这个目标,我已经着手从图库中提取符合我搜索条件的图像.毕竟,如果我能够成功搜索图像,那么我可以将其缩小到我的总体目标的细节.

这是我遇到问题的地方.我能够从API中获取所有链接,但这包括专辑链接,这些链接将会中断,因为它们不是真正的图像只是它们的存储库.

我一直试图拉动画廊图像和专辑图像,或只是一个然后另一个,但我似乎已经撞墙了.下面的链接不仅显示了我的代码,还显示了他们的JSON数据样本以及来自console.log的结果,我确实显示了搜索结果.

https://w.trhou.se/p4zeovouz5

另外,我已经为这个项目添加了我的codepen,以防你想在那里玩它.

感谢您提供任何帮助.

https://codepen.io/digitalvillainy/pen/xLdGyq?editors=0011

$(document).ready(function() {
    $('form').submit(function(evt) {
        evt.preventDefault();
        var $searchField = $('#Search');
        var $submitButton = $('#Submit');

        //captures searchfield value
        var tagValue = $searchField.val();
        var queryURL = "https://api.imgur.com/3/gallery/search/{{sort}}/{{window}}/{{page}}?q_type=jpg&q=" + tagValue + "";

        //Settings for Request
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": queryURL,
            "method": "GET",
            "headers": {
                "authorization": "Client-ID 65a5c1418e8d1fb"
            }
        }

        //Retrieving data from Ajax
        $.ajax(settings).done(function(response) {
            var photoHTML = '<ul>';
            //Loop through JSON data
            $.each(response.data, function(i, images) {
                photoHTML += '<li>';
                photoHTML += '<img src="' + images.link + '"></li>';
            }); // end each

            photoHTML += '</ul>';
            $('#autoGallery').html(photoHTML);
            console.log(photoHTML);
        });
    });
});

Answer 1

我知道这已经很老了，但我还是想回答。

JSON 对象有一个属性is_album。人们可以用它来确定它是一张图像还是一张专辑。
通过使用，if(!images.is_album){...}您可以过滤掉专辑中的所有内容并显示其余内容。
代表专辑的对象images本身有一个属性。循环浏览它们也可以显示相册照片。
这是我所做的： https:
//jsfiddle.net/szp7qj43/