Question

what are examples of code that will display images on the page? looking for both the HTML and the javascript

在页面上显示图像的代码示例有哪些?寻找HTML和javascript

Background

I was following along to a tutorial and was able to replicate their example, but now stuck in implementing for my own website

我跟随了一个教程，并能够复制他们的例子，但现在坚持为我自己的网站实现

Code

Demo on Codepen: http://codepen.io/JGallardo/pen/jVRKGP

演示在Codepen:http://codepen.io/JGallardo/pen/jVRKGP

Javascript

this is what I am having a problem with

这就是我的问题所在

$.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);
    }
});

I copied that from a tutorial, so if I understand a few things, I can replicate or improve on for my use, namely

我从一个教程中复制了它，所以如果我理解了一些东西，我可以复制或改进我的使用，即。

What is var p = postings[i];

什么是var p =张贴[i];

I just want the images, and I want them to open in a new window, but this tutorial had

我只是想要这些图像，我想让它们在一个新的窗口中打开，但是本教程有

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

so i can clean that up to something like

我可以把它整理成

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

Also in that url, when i swap it out with mine, it just does not work (display any images). See: http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

在那个url中，当我把它和我的交换出去时，它就不能工作了(显示任何图像)。参见:http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

I tried a few random other blogs, and it works. including with fashion.tumblr.com and kanye.tumblr.com

我随便找了几个博客，都成功了。包括fashiontumblr和kanye.tumblr

I should also note that I only want single images, i think their method was targeted at photosets?

我还需要注意的是，我只想要单一的图像，我认为他们的方法是针对摄影集的?

1 个解决方案

#1

You need to define the post type. As you mention in the example they are targeting photosets.

您需要定义post类型。正如你在例子中提到的，他们瞄准的是摄影器材。

This code should work with photo posts (you will need to tinker it slightly):

这段代码应该适用于照片贴子(您需要稍微修改一下):

// 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');
        }

EDIT

编辑

OK, you have a few issues which I will try and address.

好吧，你有一些问题我会试着解决的。

I have made a jsfiddle and commented my code, but I will try to explain.

我做了一个jsfiddle并注释了我的代码，但是我将尝试解释。

Firstly, change your api call from http:// to https://

首先，将api调用从http://更改为https://

Secondly the blog you are calling is only returning photo posts, so the code you have so far works fine. The default number of posts is 20 but I set an upper limit of 50, and all posts are still in fact photo posts. So we cannot use it to test our code. See for example: http://typophile.tumblr.com/archive/filter-by/text

第二，你正在调用的博客只返回照片贴子，所以到目前为止你的代码运行良好。默认的帖子数量是20，但是我设置了50的上限，所有的帖子实际上还是照片的帖子。所以我们不能用它来测试代码。例如:http://typophile.tumblr.com/archive/filter-by/text

So I tried using my own blog and setting an upper limit of 50 posts.

所以我试着用我自己的博客，设置50篇文章的上限。

Thirdly you want to wrap your images in an anchor and have them open in a new window? Currently you are outputing the image with an anchor afterwards and no text for the link.

第三，你想把你的图像用锚包起来，在一个新的窗口中打开?目前，您正在用一个锚来输出图像，并且没有链接的文本。

So change this:

所以改变这个:

text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';

style =' font - family:宋体;mso - ascii - font - family: tahoma; mso - hansi - font - family:url + ' > < a href = ' + p.post_url + ' > ' + p.source_title +“< / > < /李>”;

To this:

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

文本+ = ' <李> < a href = ' + p。post_url+' target="_blank"> 如何使用Tumblr的API在我的网页上显示所有的图片? < / > < /李> ';

This is my code:

这是我的代码:

$.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. 
}
});

If you run this from jsfiddle and inspect the console you will currently see the attached image.

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

And if you look at the html output you can see that the majority are photo posts, which our code already accounts for, and now I have written some statements to allow for text posts, and other post types (a fallback really). If you want to specify different output for more post types you have to add them into the if/else if statement.

如果你看一下html输出，你会发现大部分都是照片贴子，我们的代码已经说明了这一点，现在我已经写了一些语句来允许文本贴子，以及其他的贴子类型(实际上是一个退步)。如果您想为更多的post类型指定不同的输出，您必须将它们添加到If /else If语句中。

To further test this I would try swapping the url parameter in the ajax call to try and test other blogs that will return lots of different post types.

为了进一步测试这一点，我将尝试在ajax调用中交换url参数，以尝试并测试将返回许多不同post类型的其他blog。

I tried this url: "https://api.tumblr.com/v2/blog/andthentheycalledmetania.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",

我试过这个网址:“https://api.com/v2/blog/andthenthencalledmetania.com/posts? =50&api_key

And look at the post types returned.

看看返回的post类型。

Much better for testing.

更好的进行测试。

I hope this explains the process better. If you have more questions feel free to ask.

我希望这能更好地解释这个过程。如果你有更多的问题，请提出来。

#1