What happened in cover.html? Help!

[skyao]

In file layouts/shortcodes/blocks/cover.html of docsy:

{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }}
<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
<link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
<style>
#{{ $blockID }} {
    background-image: url({{ $promo_image_small.RelPermalink }}); 
}
@media only screen and (min-width: 1200px) {
    #{{ $blockID }} {
        background-image: url({{ $promo_image_big.RelPermalink }}); 
    }
}
</style>
{{ end }}

By default, when relativeURLs is false, the result will be :

<link rel="preload" as="image" href="/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_960x540_fill_q75_catmullrom_top.jpg" media="(max-width: 1200px)">
<link rel="preload" as="image" href="/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_1920x1080_fill_q75_catmullrom_top.jpg" media="(min-width: 1200px)">
<style>
#td-cover-block-0 {
    background-image: url(/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_960x540_fill_q75_catmullrom_top.jpg); 
}
@media only screen and (min-width: 1200px) {
    #td-cover-block-0 {
        background-image: url(/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_1920x1080_fill_q75_catmullrom_top.jpg); 
    }
}
</style>

All the four URLs above are abstract URL start with "/"。

But when I set relativeURLs to true:

<link rel="preload" as="image" href="./featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_960x540_fill_q75_catmullrom_top.jpg" media="(max-width: 1200px)">
<link rel="preload" as="image" href="./featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_1920x1080_fill_q75_catmullrom_top.jpg" media="(min-width: 1200px)">
<style>
#td-cover-block-0 {
    background-image: url(/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_960x540_fill_q75_catmullrom_top.jpg); 
}
@media only screen and (min-width: 1200px) {
    #td-cover-block-0 {
        background-image: url(/featured-background_hu2d50765f5a0c98b4809c0a364847c8b6_363580_1920x1080_fill_q75_catmullrom_top.jpg); 
    }
}
</style>

Only two of them used by <link rel="preload" href="" /> changed to related URLS, but another two used by background-image: url() are still abstract URLs.

And it's very tricky that they are using the same code to output the image url: {{ $promo_image_big.RelPermalink }} or {{ $promo_image_small.RelPermalink }}. Why the result are different?

In my case, I use a subdirectory as baseURL like baseUrl="https://skyao.io/learning-hugo", so I want to set relativeURLs to true.

Please help me to fix this, or how to work around.