Display latest wordpress featured images on static HTML page

I have a wordpress blog page installed in subfolder of my website(converted from html)and a static html home page. I would like to display 3 latest posts and its featured images on home page. With code below i can display latest posts text but i dont know how to show featured images of posts. 

Into index.php of a wordpress custom theme i placed featured photo inside a div:

<div id="blogphoto"><?php the_post_thumbnail(); ?></div>

This is the code on static html index.php page which is pulling out latest post. Can anyone help me to get featured images of these posts too?

<pre><div id="wp-post">

      <?php
      
      $args = array('numberposts'=>1);
      $recent_posts=wp_get_recent_posts($args);
      foreach( $recent_posts as $recent_post ){
      echo "<h3>".$recent_post['post_title']."</h3> <br>"; 
      echo "<span>".$recent_post['post_date']."</span> <br>";
      echo  "<p>".$recent_post['post_content']."</p><br><br>";
      
      }
      ?>
     </div>
    
    <div id="wp-post2">
    <?php
    
    $args = array('numberposts'=>1 , 'offset'=>1 );
    $recent_posts=wp_get_recent_posts($args);
    foreach( $recent_posts as $recent_post ){ 
    echo "<span>".$recent_post['post_title']."</span> <br>";
    echo  "<p>".$recent_post['post_content']."</p><br><br>";
    }

    ?>
    </div>

    <div id="wp-post3">
    <?php
    
    $args = array('numberposts'=>1 , 'offset'=>2 );
    $recent_posts=wp_get_recent_posts($args);
    foreach( $recent_posts as $recent_post ){ 
    echo "<span>".$recent_post['post_title']."</span> <br>";
    echo  "<p>".$recent_post['post_content']."</p><br><br>";
    }

    ?>
    </div>

<?php if (has_post_thumbnail( $post->ID ) ): ?>
  <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
  <div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">

  </div>
<?php endif; ?>