Pinterest圖像在ajax調用后返回損壞

Question

因此，我正在嘗試制作一個微型應用程序，在其中可以訪問我固定在pinterest板上的大量圖紙參考。 我設法使ajax調用正常工作，有些圖像正在追加，但有些卻沒有。

我最初使用url屬性，但是隨后一切都中斷了，所以我切換到了鏈接，設法獲得了一些圖像，但有些仍然損壞。 之后，我添加了一個if語句來清除沒有鏈接URL的圖像。

這可以正常工作，因為我可以看到控制台中彈出的URL，它們只是不渲染圖像。

有人有什么想法嗎？

//on document start up

$(document).ready(function(){

//declare the global variables:

var queryURL, results, resultURL, imageHolder, image;

//create the url where we will get the images from pintrest

 queryURL = "https://api.pinterest.com/v1/boards/gasulliv/concept-art-inspiration/pins/?access_token=AXHj1v5z8_oy5kcy6NtLlZaoY_XAFQ-h5sli9PNErKPqdSA7cQAAAAA&fields=id%2Clink%2Cnote%2Curl";

 //empty the div
 $("#images").empty();

//performing ajax call

$.ajax({
    url: queryURL,
    method: "GET"
    }).done(function(response) {
        console.log(response.data);

    //creating a variable for the repsonse data

        results = response.data;

        //loop through the data
        //this is the shorthand for a forloop
        for (var i in results){

            resultURL = results[i].link;
            console.log(results[i].url);

            if (results[i].link !== ""){

                //put results in a variable and then with each loop append them to the div

                    imageHolder = $("<div class='imageHolder'>");

                    image = $("<img>").attr("src", resultURL);

                    imageHolder.append(image);

                    $('#images').prepend(imageHolder);

            }

        }

    });

}）;

Answer 1

弄清楚了。

如果確實遇到了pinterest api的問題，請確保您的queryURL包含原始內容，並確保將其返回，如下所示：

resultURL = results[i].image.original.url;

這應該返回原始圖像的URL

Answer 2

不要讓所有人都可以訪問您的訪問令牌！ 為了提高可讀性，您可以編寫如下代碼：

var tpl = [
        "<div class='results'>",
        "<div class='card'>",
            "<div class='card-result'>",
            "<p class='pBlack20'>" + data.response.docs[i].lead_paragraph + "</p>",
            "<p class='pBlack14'>" + data.response.docs[i].pub_date + "</p>",
            "<a class='FontRed link' target='_blank' href='" + data.response.docs[i].web_url + "'>For more detail</a>",
            "<hr>",
            "</div>",
        "</div>",
        "</div>"
    ]
    $('.results-content').append(tpl.join(''));