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

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”。尝试将“_m”替换为“_c”，它应该会为您提供 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 照片搜索 - 如何获得更大的图像？

Flickr API photo search - How to get larger images?

html

flickr

photos

image-size

twitter-bootstrap