Question

所以我使用Flickr API进行照片搜索并在页面上显示图像，但似乎我得到的每个图像都是缩略图大小或极低分辨率;我做错了什么？

这是我的代码：

<html>  
<head>  
<title>Test App Project</title>  
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">   
<style type="text/css">  

    .searchArea
    {
        height: 25%;
    }

    .cover-container {
        height: 75%;
        width: 100%;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .cover-item {
        display:block;
        /*
        margin-top: 8px;
        margin-bottom: 8px;
        */
        margin: 25% 35% 25% 35%;
        box-shadow: 2px 2px 4px #bbb;
        border-top-right-radius: 4px;
        width: auto;
        height: auto;
        vertical-align: bottom;
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
    }

</style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script>  


$(document).ready(function(){  
    $('#button').click(function(){  

        //Clear previous images
        document.getElementById("results").innerHTML = "";

        var search_val = document.getElementById("search_field").value; 

        var apiurl_search = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=REDACTED&tags="+ search_val +"&safe_search=3";
        var src;

        $.getJSON(apiurl_search + "&format=json&jsoncallback=?",function(data){
            $.each(data.photos.photo,function(i,myresult){

                src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

                $("<img class='cover-item' />").attr("src", src).appendTo("#results");

                if (i == 24) return false;
            });  
        });  
    });  
}); 

</script>  
</head>  
<body>  
<div class="container">  
    <div class="row searchArea">  
        <div class="col-md-4"></div>
        <div class="col-md-4">  
            <div class="row">
                <div class="col-md-12">
                    <h2>Test App Project</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <label for="search_field">Search: </label>
                    <input id="search_field" type="text">
                </div>
                <div class="col-md-1"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button>  
                </div>
                <div class="col-md-2"></div>
            </div>
            <hr>  
        </div>  
        <div class="col-md-4"></div>
    </div>  

    <div class="row-fluid">  
        <div class="col-lg-12 col-md-10">
            <div id="results" class="cover-container">
            </div>
        </div>  
    </div>  
</div>  
</body>  
</html>

Answer 1

从我所看到的，你返回的是Small的大小，因为你的图像名称末尾有“_m”。尝试用“_c”替换“_m”，它应该给你一个800x800的尺寸。

您可能希望为每个图像ID调用“flickr.photos.getSizes”以检查大小是否可用。您可以在此处查看示例回复 - https://www.flickr.com/services/api/flickr.photos.getSizes.html

因此，在上面的代码中，您可能希望通过替换...

来测试它

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

与..

src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_c.jpg";

如果以上情况有效，我会检查所有图片，如果有些图片未被退回，您可能需要进行尺寸调用，以便在指定之前找到可用尺寸。

Flickr API照片搜索 - 如何获得更大的图像？

1 个答案: