Spring Boot环境下Bootstrap全屏轮播图显示异常求助

Hey Ekera, let's work through this issue step by step. The problem you're seeing—works locally but breaks in Spring Boot—almost always boils down to resource path mismatches or misconfigured view handling. Here's what to fix:

1. Fix Image Paths in Your Carousel Slides #

In your HTML, you're using static/1.jpg for background images, but Spring Boot serves static resources directly from the src/main/resources/static folder. That means your path should omit the static/ prefix, or better yet, use Thymeleaf's URL syntax to avoid path issues entirely.

Bad:

<div class="item active" style="background-image: url('static/1.jpg');">

Good (Thymeleaf syntax):

<div class="item active" style="background-image: url([[@{/1.jpg}]])">

(The double brackets [[...]] let Thymeleaf evaluate the URL correctly in inline styles.)

Or if you prefer plain paths (less reliable across environments):

<div class="item active" style="background-image: url('/1.jpg');">

2. Complete Your Controller Code #

Your controller snippet cuts off, but it needs to properly return the view name so Spring can find your HTML file. Make sure your controller method returns the correct view (assuming your HTML is named index.html in src/main/resources/templates):

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@org.springframework.stereotype.Controller
public class Controller {
    @RequestMapping(value = {"/"}, method = RequestMethod.GET)
    public ModelAndView home() {
        return new ModelAndView("index"); // Matches src/main/resources/templates/index.html
    }
}

3. Verify Spring Boot Resource Folder Structure #

By default, Spring Boot expects your files to be in specific locations—double-check your project structure matches this:

src/
└── main/
    └── resources/
        ├── static/
        │   ├── css/
        │   │   └── custom.css
        │   ├── 1.jpg
        │   ├── 2.jpg
        │   └── 3.jpg
        └── templates/
            └── index.html

If you need to customize paths (rare for default setups), add these lines to application.properties to confirm:

# Thymeleaf template settings (default values, just for verification)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# Static resource mapping (default is already this)
spring.web.resources.static-locations=classpath:/static/

4. Check Browser Console for Errors #

Open your browser's developer tools (F12) and go to the Console tab. If you see 404 errors for images or CSS, that confirms the path issue. Fixing those missing resources will likely resolve the blank screen—broken styles or missing images can collapse the carousel layout entirely.

Once you make these changes, restart your Spring Boot app and the carousel should render correctly, just like it did when you opened the HTML file locally.

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