jquery - 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/