Thumbnail is showing outside its div instead of inside it

Question

I'm echoing the post thumbnail here:

echo '<div class="post-image right">' . the_post_thumbnail('featured-portrait-large') . '</div>';

And it works, but it's outputting the image outside the div like this:

<div class="post-header-text">
  <img width="500" height="700" src="[IMAGE URL DELETED]" class="attachment-featured-portrait-large size-featured-portrait-large wp-post-image" alt="" loading="lazy">
  <div class="post-image right"></div>
</div>

What I want is:

<div class="post-header-text">
  <div class="post-image right">
    <img width="500" height="700" src="[IMAGE URL DELETED]" class="attachment-featured-portrait-large size-featured-portrait-large wp-post-image" alt="" loading="lazy">
  </div>
</div>

Could someone explain why and what I've done wrong?

Answer 1

the_post_thumbnail() echo the output, hence that's why the thumbnail is misplaced.

To manually echo the output, you should use get_the_post_thumbnail() instead:

echo '<div class="post-image right">' . // wrapped
    get_the_post_thumbnail(null, 'featured-portrait-large') . '</div>';

Or you can instead do this:

echo '<div class="post-image right">';
the_post_thumbnail('featured-portrait-large');
echo '</div>';

Answer 2

You can simply get image url then add this url to image tag, I hope this will help you.

<?php 
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'medium', true);
$imageURL = $thumb_url[0];
?>