Adding Image to Vaadin Flow Grid

Flow
1

Hi,

I am trying to get an image to be displayed on Vaadin Flow Grid but without success. Below is my code:

	private Grid<Integer> grid = new Grid<>();
	grid.addColumn(i -> i).setHeader("Number"); 
	grid.addColumn(i -> new ThemeResource("../theme/ajax-loader.gif")).setHeader("Preview");
	grid.setItems(IntStream.range(1,21).boxed());

What I get is a Number column and a Preview column showing the text “…/theme/ajax-loader.gif”.
I am new to Vaadin and hope to get some guidance on the above.

Thanks in advance.

2

Hi JB

There is no ThemeResource class in Vaadin Flow, this is a class from Vaadin 7 or 8. Are you sure you are using Flow (Vaadin 10+)?

If so, then you can try grid.addColumn(i -> new Image("../theme/ajax-loader.gif", "alt text")).setHeader("Preview");

3

Thanks Kaspar for the suggestion.
I am getting the “com.vaadin.flow.component.html.Image@29d00c” displayed at the Preview column as shown in my attachment.
How do I set the grid to display them as image instead of text?

	private Grid<Integer> grid = new Grid<>();
	grid.addColumn(i -> i).setHeader("Number");
	grid.addColumn(i -> new Image("theme/ajax-loader.gif", "alt text")).setHeader("Preview");
	grid.setItems(IntStream.range(1,10).boxed());

17541541.png

4

oops my mistake, you should use a ComponentRenderer grid.addColumn(new ComponentRenderer<>(i -> {})); or the short form of that: grid.addComponentColumn(i -> {})

grid.addComponentColumn(i -> new Image("theme/ajax-loader.gif", "alt text")).setHeader("Preview");
5

Yes, it works :slight_smile:
Thanks for guiding me to the right track.

6

What if each row in Grid has its own image ?

7

Timothy Allen:
What if each row in Grid has its own image ?

Something like that should work:

private Grid<Person> grid = new Grid<>();;
grid.addComponentColumn(person -> new Image(person.getImageUrl(), "alt text")).setHeader("Preview");
8

Thanks … I guess using StreamResource might be better as not to use URL. I think my issue was where to put them (I have like 1000 :slight_smile: ).