Question

我想用带有“风景”标签的flickr api随机拍照。随机照片链接似乎是以编程方式添加到ChromeDevTools中的inspect元素的html中。但是没有照片。我做错了什么？

    $(document).ready(function() {


      $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
               {
                  tags: "landscape",
                  format: "json"
                },

                //The callback function
                function(data) {

                  //Get random photo from the api's items array
                    var randomPhoto = data.items[Math.floor(Math.random() * data.items.length)];  


                    $(".portret").css({


                      position: "relative",
                      height: "100vh",
                    //Use the randomPhoto's link
                      backgroundImage: "url("+randomPhoto.link+")",
                      backgroundPosition: "center",
                      backgroundRepeat: "no-repeat",
                      backgroundSize: "cover"
                    });
                }

               );




    });

Answer 1

您必须使用media对象来设置背景图像。

您使用的'link'属性不正确，这是Flickr照片详细信息的链接。您只需要图像的网址。

试一试：

            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
               {
                  tags: "landscape",
                  format: "json"
                },

                //The callback function
                function(data) {

                  //Get random photo from the api's items array
                    var randomPhoto = data.items[Math.floor(Math.random() * data.items.length)];  


                    $(".portret").css({


                      position: "relative",
                      height: "100vh",
                    //Use the randomPhoto's link
                      backgroundImage: "url("+randomPhoto.media.m+")",
                      backgroundPosition: "center",
                      backgroundRepeat: "no-repeat",
                      backgroundSize: "cover"
                    });
                 }
             );

Flickr API随机div背景

1 个答案: