Trouble accessing static content after changing Vaadin app URL mapping

Frontend
1

Hey everyone, I’m stuck with a Vaadin issue. I moved my app to a different URL mapping, but now it can’t find the static content in the frontend/images folder. Here’s what I did:

  1. Set vaadin.urlMapping = /vaadin/* in application.properties
  2. Added a new VaadinServlet in my Application class
  3. The app starts on the new context, but images aren’t showing up

For example, this code doesn’t work anymore:

Image logo = new Image("images/brand-icon.png", "brand-icon");
headerSection.add(logo);

The image just doesn’t appear. I’m using Vaadin 23.2.17 with Spring Boot security. Any ideas on how to fix this? I’m pretty sure I’m missing something obvious, but I can’t figure it out. Thanks for any help!

2

hmmm, interesting problem! have u tried checking the network tab in ur browser’s dev tools? it might show where the images r actually being requested from. also, did u update any @WebServlet annotations if ur using those? sometimes they need tweaking too. what happens if u try accessing the image directly thru the url?

3

hey leo, had similar headache recently. try this - use StreamResource instead of direct path. like:

StreamResource imageResource = new StreamResource(“brand-icon.png”, () → getClass().getResourceAsStream(“/META-INF/resources/frontend/images/brand-icon.png”));
Image logo = new Image(imageResource, “brand-icon”);

might solve ur issue. lmk if it works!

4

I encountered a similar issue when changing the URL mapping for my Vaadin application. The problem lies in how Vaadin handles static resources when you modify the servlet mapping. To resolve this, you need to update your resource references to include the new context path.

Try modifying your image reference like this:

Image logo = new Image("vaadin/images/brand-icon.png", "brand-icon");

This should prepend the new context path to your static resource URLs. Additionally, ensure that your VaadinServlet configuration includes the correct static file locations. You might need to adjust the staticFileLocation parameter in your servlet configuration to match the new URL structure.

If this doesn’t solve the issue, double-check your security configuration to ensure it’s not blocking access to the static resources under the new path.