How to load a WebContent/img/logo.png image?

I’m unable just to load a simple logo image in my first sample Vaadin app.

Supposing the logo.png file is under
folder, what I need to do?

Embedded logo = new Embedded("", new ExternalResource("img/logo.png"));		
	// "/img/logo.png" and "/mycontext-root/img/logo.png" also doesn't works

Could somebody give me advice on this newbie question?

(But note that I don’t want to put my images under classes directory)


You need to replace ExternalResource with ThemeResource, that should do the trick.

Ok, I now understand the issue.
Here is a table of correspondence between code and path to image (that Vaadin creates) in case someone needs to figure out how it works:

ExternalResource("img/logo.png") - http://localhost:8080/img/logo.png

ExternalResource("/img/logo.png") - http://localhost:8080/img/logo.png

ExternalResource("ayto1-admin/img/logo.png") - http://localhost:8080/ayto1-admin/img/logo.png

ThemeResource("img/logo.png") - http://localhost:8080/ayto1-admin/VAADIN/themes/reindeer/img/logo.png

ThemeResource("/img/logo.png") – ERROR!

Just a minor correction. In VAADIN 7.3.8 I found ‘ExternalResource(“ayto1-admin/img/logo.png”)’ to point to http://localhost:8080/ayto1-admin/ayto1-admin/img/logo.png.

So ExternalResource(“img/logo.png”) would be good enough to take you to http://localhost:8080/ayto1-admin/img/logo.png


You should never use relative paths with ExternalResource, because then it depends on how you have input your application URL in the location field. There’s a difference if it ends with slash or not.

For example, if the location is “http://localhost:8080/ayto1-admin/” with the trailing slash, the location of the resource “img/logo.png” is relative to the slash, that is, “http://localhost:8080/ayto1-admin/img/logo.png”.

But if the location is “http://localhost:8080/ayto1-admin” (without the trailing slash), the resource URL will be “http://localhost:8080/img/logo.png”.

Thanks Marko - This makes sense!