flickr api 搜索不显示图片

Question

当我单击搜索按钮并查看 firebug 中的网络选项卡时，它显示正在返回 JSON 对象，但我无法将它们加载到我的浏览器中进行查看。如果我将 "var url" 的部分拼凑到地址栏中，它也可以工作。我认为错误可能与最后一个函数有关，但我无法弄清楚。

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">     
  <style>
  img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>   
</head>
<body>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>      
<script>
  $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.items, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});
</script>
</body>
</html>

Answer 1

看来 Flickr API 已更改，您的示例已过时。

您只需要使用 Google Chrome 开发人员控制台或使用断点和监视来调查来自 API 的数据。

有一个工作片段：

  $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.photos.photo, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});

  img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>

flickr api 搜索不显示图片

flickr api search not displaying images

ajax

each

jquery

flickr

getjson