Can't add a png image

Hi All,

I'm new to vaadin, and I'm having some kind of a problem with adding an image to a layout. I put the image in the same folder that is used in the sampler example of the image (../runo/icons/64/logo2.png).

Window mainWindow = new Window("page 1");
HorizontalLayout h1 = new HorizontalLayout();
h1.setWidth("100%");
mainWindow.addComponent(h1);

Embedded e = new Embedded("MegaSoft Logo", new ThemeResource("../runo/icons/64/logo2.png"));
h1.addComponent(e);
setMainWindow(mainWindow);

The window displayed shows only the caption "MegaSoft Logo" and no image.
Is there something wrong with this? And if I want to display an image that is located for example in the source folder, how should I do it?

Thanks

Hi Ahmed, and welcome!

So the correct folder where you've placed your image is WebContent/VAADIN/themes/runo/icons/64/logo2.png, right?

Are you using the Runo theme or the Reindeer theme in your app?

Have you extracted the theme contents from the Vaadin JAR, so you have the contents of the runo (or reindeer) folder in your project?

If so, then your Embedded should be able to show the image correctly. Could you inspect the generated HTML IMG-element in the browser to see to which URL it points to?

If you're using the Runo theme in your application, you can simplify the path of the ThemeResource a bit, to new ThemeResource("icons/64/logo2.png")

Note also, that you probably should create your own theme folder for your application specific resources, e.g. create a folder called "mytheme" inside WebContent/VAADIN/themes folder, and place the following code into a file named "styles.css"

@import "../runo/styles.css";

Then you can place the image freely inside the mytheme folder, and then refer to the image with ThemeResource, image path relative to the mytheme folder root.

Hey Jouni, and thanks for the quick reply!

Yes, the location of file is exactly as you said "WebContent/VAADIN/themes/runo/icons/64/logo2.png".

I haven't specified which theme to use, and I don't know how, but I tried before to add an already existing image in the same runo folder, like this one: "WebContent/VAADIN/themes/runo/icons/64/arrow-down.png" using the same code that I wrote for logo2.png image, and it actually worked, but when I tried to put the logo2.png image in the same folder it didn't work!

So How can I use any of the themes, either Reindeer or Runo?

and for the code that I should write in the styles.css file, should I be using runo theme for the code to work or not?

Thanks again :)

Ahmed Mostafa Hassan: I haven't specified which theme to use, and I don't know how

OK, then you're using the default which is Reindeer. To change the application theme, just call setTheme("theme-name") in your Application.init()

Ahmed Mostafa Hassan: but I tried before to add an already existing image in the same runo folder, like this one: "WebContent/VAADIN/themes/runo/icons/64/arrow-down.png" using the same code that I wrote for logo2.png image, and it actually worked, but when I tried to put the logo2.png image in the same folder it didn't work!

So you have just created the empty folders inside your WebContent, and placed that one single image there?

If so, my guess is that since all request to the VAADIN/themes/runo folder are forwarded through the servlet (which depends on your web.xml descriptor), the static file isn't searched. I would suggest you try to create a completely new theme, as I described in the previous post.

Ahmed Mostafa Hassan: and for the code that I should write in the styles.css file, should I be using runo theme for the code to work or not?

It doesn't matter, both will work.

It Worked! I created a new theme just like you said and it worked. Thanks alot