WP缩略图未正确呈现

I'm trying to add a thumbail to a div using the_post_thumbnail() function.

The code I'm using is the following:

<div class="sc-col sc-s12 sc-m3 sc-card sc-card-basic">
    <figure>'.the_post_thumbnail(array('370', '188')).'</figure>
</div>

But when the code is rendered in a browser the code becomes (just took a part of the rendered code):

<img width="370" height="182" src="/wp-content/uploads/2016/05/image.png">
<div class="sc-col sc-s12 sc-m3 sc-card sc-card-basic">
    <figure></figure>
</div>

As you can see the image is rendered outside the div and figure. My question is why is it doing this? Because now my whole layout is breaking now and, the problem is that I have to use that function else I would have used an other function. Can I somehow rewrite the function so it only returns the src link using add_filter function?

This solved it for me:

<figure><?php the_post_thumbnail(array('370', '188')); ?></figure>

As staded by @ChrisLear the_post_thumbail() doens't return a string and there for fails.

https://developer.wordpress.org/reference/functions/the_post_thumbnail/ shows that the function the_post_thumbnail is designed to actually output something to the page, not return a string.

So change your code to something more like this:

$html = '<div class="sc-col sc-s12 sc-m3 sc-card sc-card-basic">
    <figure>';
echo $html;
the_post_thumbnail(array('370', '188'))
$html = '</figure>
</div>';
echo $html;