Can someone tell me what I am doing wrong with this? I’ve looked at forum posts and API documentation and thought I had this right. However when I try to display an image with an ExternalResource all I get is a broken image box on the screen. This is part of a header that displays a logo as such:
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setHeight("120px");
verticalLayout.setWidth("100%");
verticalLayout.setSpacing(true);
verticalLayout.setMargin(false, false, true, false);
HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.setSizeFull();
horizontalLayout.setMargin(false, false, false, false);
horizontalLayout.setSpacing(true);
Embedded logo = new Embedded("", new ExternalResource("images/myimage.jpg"));
horizontalLayout.addComponent(logo);
horizontalLayout.setComponentAlignment(logo, Alignment.TOP_LEFT);
verticalLayout.addComponent(horizontalLayout);
verticalLayout.setComponentAlignment(horizontalLayout, Alignment.TOP_CENTER);
I have verified that in my tomcat/webapps/context/images I do have myimage.jpg
No matter what I try the image will never show up. I’ve even used Vaadin debug and do see it seems to be constructing the src tag properly:
I am new enough to Vaadin I can’t definitively disagree with you Jens, but I did review the below forum post to ensure I was doing the same before posting the question. I am using option 1 listed in the response to that post. Unfortunately the image does not show up still.
It’s not advisable to use ExternalResources with relative paths, because the resource is relative to the URL of the application, which can be entered in different ways.
[/list]All the above URLs are valid for loading and running the application. In this example, path [tt]
/book-examples
[/tt] is loaded from the web application, under [tt]
WebContent
[/tt], but [tt]
/book-examples/book
[/tt] is the path for the application. Any path under it is handled by the application (as “path-info”).
If you know the application context, as you probably do, you could use that to get an absolute path to the static image, for example [tt]
/book-examples/images/image.png
[/tt]. Notice that also that requires that you are running the application under a sub-path under the project context, such as [tt]
/book/*
[/tt], which makes the app path [tt]
/book-examples/book
[/tt]. You define that in the [tt]
web.xml
[/tt].
Anyhow, I recommend that you use either ThemeResource (which loads from [tt]
VAADIN/themes/yourtheme
[/tt]), ClassResource (which loads from [tt]
WEB-INF/classes
[/tt]), or FileResource.
Thanks Marko for the explanation. That helps a lot.
I have migrated to using a ClassResource and moved my image to WEB-INF/classes. I have not tried this yet in straight tomcat to validate it as the app will be generally running in a Liferay portlet. Using a ClassResource from my application class I now have:
Embedded logo = new Embedded("", new ClassResource("myimage.jpg", this));
I still get no love though. Could Liferay be different in how the ClassResource looks for the image or am I yet still being dense and missing the obvious?
Note that you don’t usually put the images in the [tt]
classes
[/tt] directory yourself, but in the source tree, and copy it (or let it be copied) during compilation to the [tt]
classes
[/tt] directory. Eclipse does this automatically for everything that you put in the source tree. Well, as long as you have set your [tt]
src
[/tt] directory to be exported, which is enabled by default.
