Relative Path does not reach image

I am trying to use images to support my login page and a few other screens, but I can’t get the relative path to successfully reach an image.

my image widget has the following property

    <image id="backgroundImage" scaleMode="COVER" align="MIDDLE_CENTER" height="700px" width="700px">
        <relativePath path="VAADIN/brand-login-screen/background.jpg"/>


In case you’re using 1.0.0-SNAPSHOT, you need to update your image definition according to this issue, e.g.:


<image id="image">
  <theme path="files/jmix-icon-login.svg"/>


<image id="image">
    <theme path="files/jmix-icon-login.svg"/>


Thank you for your response Gleb, but I think the code itself is good.
On the component Inspector, the relative Path is already on the resource part. I would post a screenshot but since I am a new user, I cant post any more pics.

I think I am getting the relative path wrong… so I guess the correct question would be:
In the project on my Hard Drive, where would the relative path start? So I can place it as such on the IDE

The relative path starts from the source root, i.e. from the resources directory. Keep in mind, that files must be located under VAADIN directory to be available via URL, e.g.

<relativePath path="VAADIN/images/logo.png"/>

converted to



Thank you very much that absolutely solved it!

Folloow up question:
What happens when I deploy this project.? How am i supposed to reach the file on my server?

Everything located in the VAADIN directory is packed with the app

thank you i was concerned about the “http://localhost:8080” part of the address, but I noticed using only
VAADIN/images/logo.png works fine. Thank you for all your help