Imgur API GET 图像问题答案

【问题标题】：Imgur API GET image issuesImgur API GET 图像问题
【发布时间】：2018-02-02 17:04:45
【问题描述】：

这是我第一次使用这个网站，但我已经用尽了大部分资源试图找到答案。我正在自学如何编程，但我被困在我的第一个 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);
        });
    });
});

【问题讨论】：

结构良好的问题，希望你能得到答案

标签： jquery html css imgur

【解决方案1】：

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

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

【讨论】：