JSP中Bootstrap4轮播组件非初始图片无法加载求助

问题排查与基础修复 #

• 先确认前端实际生成的图片路径：打开浏览器开发者工具，查看非初始图片的请求URL，验证${path}是否正确输出了应用上下文路径，避免出现路径拼接错误（比如多余/缺少斜杠）。
• 确保图片文件的实际存储路径与${path}/src/img/carousel/匹配，服务器有权限访问这些文件。

实现按需加载（类似MudBlazor轮播） #

利用Bootstrap轮播的原生事件，动态加载图片，避免初始时加载所有图片：

修改后的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 data-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 data-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>
    <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>

按需加载逻辑代码 #

document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.getElementById('HomeCarousel');
    
    // 监听轮播滑动开始事件，加载目标图片
    carousel.addEventListener('slide.bs.carousel', function(e) {
        const targetItem = e.relatedTarget;
        const img = targetItem.querySelector('img');
        
        // 仅当图片未加载过时，设置真实src
        if (img.hasAttribute('data-src') && !img.src) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
});

关键说明 #

• 初始仅加载active状态轮播项的图片，其他图片将路径暂存于data-src属性，不会触发初始请求。
• 当轮播开始滑动时，通过slide.bs.carousel事件获取即将显示的轮播项，动态将data-src赋值给img.src，实现按需加载。
• 移除了你之前尝试的XMLHttpRequest代码，直接操作img的src是更简洁高效的方式，无需额外请求。

内容的提问来源于stack exchange，提问作者Feiron