如何使用Flickr API动态更新页面背景

How to update background of page dynamically with Flickr API

本文关键字：背景 更新 动态 何使用 Flickr API      更新时间：2023-09-26

Edit:可以为Flickr图像构建静态源url。解释:https://www.flickr.com/services/api/misc.urls.html

我正在做一个ajax请求抓取照片，我想解析这个信息，以更新页面的背景。

大致代码:

$.ajax({
        url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[API_KEY]&safe_search=&lat=' + geoLat + '&lon=' + geoLong + '&format=json&nojsoncallback=1',
        error: function() {
                 console.log('FlickerAPI Error');
               },
        success: function(data) {
          var photoID = data.photos.photo[0].id;
          var ownerID = data.photos.photo[0].owner;
          var backgroundImageUrl = 'http://www.flickr.com/photos/' + ownerID + '/' + photoID + '/';
          $('body').css('background-image','url(backgroundImageUrl)');
               },
        always: function() {
                console.log('finished flicker');
               }
});

当我登录到控制台这个信息时，我得到这个错误:GET http://localhost:4567/backgroundImageUrl 404 (Not Found).

但是当我注销backgroundImageUrl我得到:http://www.flickr.com/photos/[正确的照片id]/[正确的用户id]/如果我遵循链接，带我到我想要的页面。

我已经搜索了文档，看起来他们没有传递url属性。

这是使用localhost的问题吗?有没有更好的方法来更新背景与图像?由于

您正在使用字符串文字backgroundImageUrl，而不是使用变量的内容(实际url)。因为该字符串不包含主机或协议，所以它认为它是相对于当前请求的。

在创建url时，需要附加变量的值。

$('body').css('background-image','url(' + backgroundImageUrl + ')');
相关文章：