How to retrieve a image thumbnail post only using Blogger API?

Question

I was Trying to Retrieve the first image only using Blogger API for my blog Chanakya Niti In Hindi. But My callback script didn't return any image thumbnail. here's my code:

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

I Tried code below to retrive image but it didn't work: response.items[i].img.url.replace('s1600/','s1600/');

Answer 1

Here's the Answer of my question:

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