Question

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

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

Answer 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>

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

1 个答案: