Javascript 如何使用Tumblr博客的API在我的网页上显示Tumblr博客中的所有图像？ 问题:

在页面上显示图像的代码示例有哪些？正在查找HTML和javascript

背景 我一直遵循一个教程，并能够复制他们的例子，但现在坚持为我自己的网站实现

代码 Codepen上的演示：

Javascript 这就是我的问题所在

$.ajax({
    url: "http://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
    dataType: 'jsonp',
    success: function(posts){
      var postings = posts.response.posts;
      console.log(postings);
      var text = '';
      for (var i in postings) {
        var p = postings[i];
        text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';
      }
      $('ul').append(text);
    }
});

所以我可以把它清理干净

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+' target="_blank"></a></li>

同样在那个url中，当我把它和我的交换出去时，它就是不工作（显示任何图像）。见：

我尝试了一些随机的其他博客，它的工作。包括

fashion.tumblr.com

和

kanye.tumblr.com

---

我还应该注意，我只想要单个图像，我认为它们的方法是针对Photoset的？

您需要定义post类型。正如您在示例中提到的，他们的目标是Photoset

此代码应适用于照片帖子（您需要稍微修改）：

如果您从JSFIDLE运行此命令并检查控制台，您当前将看到附加的映像

如果您查看html输出，您可以看到大多数是照片帖子，我们的代码已经说明了这一点，现在我已经编写了一些语句来支持文本帖子和其他帖子类型（实际上是回退）。如果要为更多post类型指定不同的输出，则必须将它们添加到

If/else

If语句中

为了进一步测试这一点，我将尝试在ajax调用中交换url参数，以尝试测试将返回大量不同文章类型的其他博客

我尝试了这个

url:“https://api.tumblr.com/v2/blog/andthentheycalledmetania.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY“，

看看返回的帖子类型

更好的测试

---

我希望这能更好地解释这个过程。如果您还有更多问题，请随时提问。

您是否介意修复此问题以使其正常工作。我很感激你的意见，但你的例子使它更令人困惑。

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+' target="_blank"></a></li>

// already in the for loop
var postings = posts.response.posts;
var type = postings[i].type;
        if(type == 'photo'){
             text += '<li><img src=' + p.photos[0].original_size.url /// etc.
        }else if(type == 'text'){
            // do something different with a text post
        }else{
           console.log('Different post type');
        }

$.ajax({
//url: "https://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY", // this blog only returns photo posts, so we cannot test it, even with a limit of 50. But toggle this to see the contents of a different blog. 
url: "https://api.tumblr.com/v2/blog/slack-wise.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
dataType: 'jsonp',
success: function(posts){
  var postings = posts.response.posts;
  var text = '';
  for (var i in postings) {
    var p = postings[i]; // assign all the iterations in the loop to a single variable, which is easier to access
    var type = p.type; // iterate through the diffirent post types
    if(type == 'photo'){ // if the post type is a photo output this html. 
        text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';
    }else if(type == 'text'){ // if the post type is text, output this html 
            text += '<li>' +p.body+ '</li>';
    }else{ // else if the post type is something else output this html
        text += '<li>Some other post type<li>'; 
    }
    console.log(type); // lets log all the different post types so we can see them. 
  }
  $('ul').append(text); // append everything to the ul container. 
}
});