Vaadin 8 Grid: How to display images?

General
1

Hi,
This is my code:
Column<Image, ThemeResource> imageColumn = grid.addColumn(
i → new ThemeResource(i.getFilename()),
new ImageRenderer());

and my Image class contains:
private ThemeResource image;
with getter and setter:
public ThemeResource getImage()
{
return image;
}

public void setImage(ThemeResource image)
{
this.image = image;
}

Unfortunately the images are broken and are therefore not being displayed (I tried on Firefox, Chrome, Internet Explorer)
How to display images in the Vaadin 8 grid? I followed the instructions but I can not make it work.
Could you help me?

35202.jpg

2

Hi,
you are using Image.getFilename() to crete the ThemeResource.
Is getFilename() relative to the theme folder (/VAADIN/themes/)?
If not, maybe you should anothre type of resource (ClassResource, FileResource or StreamResource)

BTW, you said that your Image model class already has an accessor the the resource so to use it directly you should use

Column<Image, ThemeResource> imageColumn = grid.addColumn(Image::getImage,new ImageRenderer());

HTH
Marco

3

Yes, the Filenames are relative to the theme folder. The images are beeing found, but are broken.
Vaadin writes:
“only ThemeResource and ExternalResource are currently supported for images in Grid.”
(https://vaadin.com/docs/-/part/framework/components/components-grid.html#components.grid.renderer)

I tried:
Column<Image, ThemeResource> imageColumn = grid.addColumn(Image::getImage,new ImageRenderer());
But the images are still broken.

4

I got it! I moved the VAADIN/themes/ folder to src/main/resources (Maven project)