WordPress发布缩略图问题

Question

I am all set apart from the post thumbnail, I am currently using a placeholder image which works fine but wish to use the featured image form the post as the background, here is my code...

<?php

$args = array( 'posts_per_page' => 10, 'category' => 3 );

$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

        <div class="box" style="background-image:url('<?php the_post_thumbnail(); ?>');">
            <div class="overlay">
                <div class="buttonContainer">
                    <a href="<?php the_permalink(); ?>">
                        <button>preview</button>
                    </a>
                </div>
            </div>
        </div>


<?php endforeach; 
wp_reset_postdata();?> 

When I view this in the browser it prints out this... ');"> and no image... Where do I appear to be going wrong?

Answer 1

the_post_thumbnail() returns an img element like;

<img src="some-image-url' />

This is not what you want to pass to background-image.

You need something like:

$attachment_id= get_post_thumbnail_id( the_ID() );
$img_data = wp_get_attachment_image_src( $attachment_id, the size you want );

then you can echo $img_data[0] to get the attachment URL.