What's wrong with this code to load image in jquery backstretch in view page?

Question

i have below code for using jquery backstretch plugin in my login project. my project is asp.net core and login page is a view page. but the code has problem with local address of images. when i change address of image to a http address that work properly my images have saved in wwwroot/assets/admin/pages/media/bg. the wrong code:

<script>
  
    $.backstretch([
        "~/assets/admin/pages/media/bg/1.jpg",
        "~/assets/admin/pages/media/bg/2.jpg",
        "~/assets/admin/pages/media/bg/3.jpg",
        "~/assets/admin/pages/media/bg/4.jpg"
        ], {
            fade: 1000,
            duration: 8000
        }
    );
</script>

and this is work properly:

<script>
  
    $.backstretch([
        "https://www.w3schools.com/images/w3schools_green.jpg",
        "https://www.w3schools.com/images/w3schools_green.jpg",
        "https://www.w3schools.com/images/w3schools_green.jpg",
        "https://www.w3schools.com/images/w3schools_green.jpg"
        ], {
            fade: 1000,
            duration: 8000
        }
    );
</script>

Answer 1

this is more a wild guess than a thought-through answer but i guess you can just use absolute links (starting with "/" )

$.backstretch([
        "/assets/admin/pages/media/bg/1.jpg",
        "/assets/admin/pages/media/bg/2.jpg",
        "/assets/admin/pages/media/bg/3.jpg",
        "/assets/admin/pages/media/bg/4.jpg"
        ], {
            fade: 1000,
            duration: 8000
        }
    );