如何仅使用 Blogger API 检索图像缩略图帖子？答案

【问题标题】：How to retrieve a image thumbnail post only using Blogger API?如何仅使用 Blogger API 检索图像缩略图帖子？
【发布时间】：2018-06-19 08:21:39
【问题描述】：

我正在尝试仅使用 Blogger API 为我的博客 Chanakya Niti In Hindi 检索第一张图片。但是我的回调脚本没有返回任何图像缩略图。这是我的代码：

<div id='content'></div>
<script>
function handleResponse(response) {
  var post_number  = Object.keys(response.items).length; //number of posts
  for (i=0; i<post_number; i++) { 
    document.getElementById("content").innerHTML += "<div class='posts'><h1>" + response.items[i].title + "</h1>" + response.items[i].content + '</div>';
      
  }
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels=Guides&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA"></script>

我尝试了下面的代码来检索图像，但它不起作用： response.items[i].img.url.replace('s1600/','s1600/');

【问题讨论】：

标签： javascript thumbnails blogger

【解决方案1】：

这是我的问题的答案：

<div id='content'></div>
<script>
function handleResponse(response) {
  const parser = new DOMParser();
  response.items.forEach(item => {
    const html = parser.parseFromString(item.content, 'text/html');
    const img = html.querySelector('img');
    const url = img ? img.src : '';
    document.getElementById("content").innerHTML += `<div class='posts'><h1>${item.title}</h1><img src="${url}"><br/></div><a href='${item.url}'>Continue Reading</a>`;
  })
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels=Guides&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA"></script>

【讨论】：