get_the_post_thumbnail_url does not return anything if image size is set

I want to display the post-thumbnail image in the header using get_the_post_thumbnail_url() with defined size, however if I am using it without specifying the size, like get_the_post_thumbnail_url() it is displaying the thumbnail img, but if I am using it like: get_the_post_thumbnail_url('thumbnail') nothing is shown.

my code in the header.php is:

<?php
function vkb_header_style() {
         if (has_post_thumbnail() and is_singular()) {
             $vkb_thumbnail_url = get_the_post_thumbnail_url('thumbnail');
             echo 'background-image: url(' . $vkb_thumbnail_url . ');';
         } else {
            storefront_header_styles(); 
         }
     }
?>

<header id="masthead" class="site-header vkb-header" role="banner" style=" <?php vkb_header_style(); ?>">

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The first parameter for get_the_post_thumbnail_url() is the post ID or post object, and not the image size which is actually the second parameter.

So:

// Instead of this:
get_the_post_thumbnail_url( 'thumbnail' )

// You should use:
get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ) // pass a post ID
get_the_post_thumbnail_url( get_post(), 'thumbnail' )   // or post object

// Or you can pass a null to use the current post:
get_the_post_thumbnail_url( null, 'thumbnail' )

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0