[英]Pinterest images returning broken after ajax call
So I'm trying to make a mini app where I can access a bunch of drawing references I pinned on my pinterest board. 因此,我正在尝试制作一个微型应用程序,在其中可以访问我固定在pinterest板上的大量图纸参考。 I managed to get ajax call to work and SOME of the images are appending but then some do not. 我设法使ajax调用正常工作,有些图像正在追加,但有些却没有。
I originally used the url property but then everything broke so I switched to link where I managed to get some images but some were still broken. 我最初使用url属性,但是随后一切都中断了,所以我切换到了链接,设法获得了一些图像,但有些仍然损坏。 Afterward I added an if statement to weed out images that didn't have a link url. 之后,我添加了一个if语句来清除没有链接URL的图像。
This worked as I can see the urls popping up in the console, they just don't render images. 这可以正常工作,因为我可以看到控制台中弹出的URL,它们只是不渲染图像。
Does anyone have any ideas? 有人有什么想法吗?
//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);
}
}
});
}); });
Figured it out. 弄清楚了。
Just a head's up if you do ever run into this problem with pinterest's api, you'll need to make sure your queryURL includes the original be sure to return it like this: 如果确实遇到了pinterest api的问题,请确保您的queryURL包含原始内容,并确保将其返回,如下所示:
resultURL = results[i].image.original.url;
this should return the original image's url 这应该返回原始图像的URL
Don't make your access token accessible to everyone ! 不要让所有人都可以访问您的访问令牌! then for readability, you can make a code like this : 为了提高可读性,您可以编写如下代码:
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(''));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.