JSP cannot get carousel image items in Bootstrap4 carousel component

Question

I created a carousel following the bootstrap guide and I do have those picture (it work well in my static design) but the previous 2 images cannot get by the client while it working in jsp. Or is there anyone who can teach me how to make them can be 'get' while every carousel is shown?

I'm very sure there's no error in the path for 'src'. I've done it extremely and presented an application-scope attribute which saved the current working directory ( pageContext.request.contextPath ) and preserved it to every path by using EL.

here's the minimal reproducible example:

(JSP)

            <div id="HomeCarousel" class="carousel slide w-full" style="height: 70vh !important;  overflow: hidden;"
             data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#HomeCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#HomeCarousel" data-slide-to="1"></li>
                <li data-target="#HomeCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" id="cain" style="max-height: 70vh; min-height: 70vh !important; overflow: hidden ">
                <div class="carousel-item active" style="max-height: 70vh; overflow: hidden ">
                    <img src="${path}/src/img/carousel/0.png" class="block w-full h-full" alt="...">
                    <div class="carousel-caption border-0 shadow bg-black bg-opacity-50 w-1/2 mx-auto rounded-lg" style="bottom: 5px !important">
                        <h5 class="font-mono text-2xl font-semibold ">New Domain Now On Sale</h5>
                        <p>st. $3.99/mo. Get your Internet Show Start Here.</p>
                    </div>
                </div>
                <div class="carousel-item" style="max-height: 70vh; overflow: hidden ">
                    <img src="${path}/src/img/carousel/1.png" class="block w-full h-full" alt="...">
                    <div class="carousel-caption border-0 shadow bg-black bg-opacity-50 w-1/2 mx-auto rounded-lg" style="bottom: 5px !important">
                        <h5 class="font-mono text-2xl font-semibold ">Free DNS and Forwarding...</h5>
                        <p>...if you Buy New Domain Right Here Right Now!</p>
                    </div>
                </div>
                <div class="carousel-item" style="max-height: 70vh; overflow: hidden ">
                    <img src="${path}/src/img/carousel/2.png" class="block w-full h-full" alt="..." style="max-height: 70vh; overflow: hidden ">
                    <div class="carousel-caption border-0 shadow bg-black bg-opacity-50 w-1/2 mx-auto rounded-lg" style="bottom: 5px !important">
                        <h5 class="font-mono text-2xl font-semibold ">Across Gender Top Level</h5>
                        <p><i><b>.mom</b></i> and <i><b>.dad</b></i> domains now AVALIABLE</p>
                    </div>
                </div>
            </div>
            <script>
                // var carousels = document.getElementById('cain').children;
                const ___announceChange = () => { // I found the part that controls bootstrap's carousel, and modified it and try to let it invoke this function...
                    var mxmx = new XMLHttpRequest();
                    mxmx.open('get', '${path}/src/img/carousel/0.png');
                    mxmx.open('get', '${path}/src/img/carousel/1.png');
                    mxmx.open('get', '${path}/src/img/carousel/2.png');
                }
            </script>
            <a class="carousel-control-prev" href="#HomeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#HomeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

() Follow the path to insert some pictures in the path, it maybe collapse since it work because some of the picture is missing.

Expected: Every item can be shown in every single carousel without a 404 error. But hey, I remember that the carousel of MudBlazor will request every single image if it needs. I'm glad if someone can teach me to make this bootstrap carousel can work asame.

Answer 1

Here I found that perhaps been blocked. After adding:

    <mvc:resources mapping="/src/img/carousel/**" location="/src/img/carousel/" />

And I restructed my project: put every page components into a folder just what I did in blazor XD then everything became bright. So for this issue, all blame to the MVC blocked.