Question

所以我试图制作一个迷你应用程序，在那里我可以访问我固定在我的pinterest板上的一堆绘图参考。我设法让ajax调用工作，一些图像正在追加，但有些则没有。

我最初使用了url属性，但随后一切都破了，所以我切换到链接，我设法得到一些图像，但有些仍然被打破。之后我添加了一个if语句来清除没有链接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;

这应该返回原始图片的网址

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(''));

在ajax调用之后，Pinterest图像返回破坏

2 个答案: