CODEWITHSUNDEEP
javavaadinvaadin-gridvaadin10
Nick Friskel
Nick Friskel

Reputation: 2437

Vaadin 10 Grid add custom image icon

I am using a Vaadin 10 (Flow) Grid to stream data to new rows, and I am trying to add a custom image icon to my TemplateRenderer.

I have a TemplateRenderer setup like this:

TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
            of("<div class$=\"[[item.class]]\">[[item.size]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("size", TradeUni::getSize);

Which displays my numbers correctly in the grid cell like this:

enter image description here

I would like to have my image rendered inside the same cell, to the left of the numbers.

This was my (very crude) attempt to import it using html:

TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
            of("<div class$=\"[[item.class]]\"><img src=\"i.imgur.com/3LQBglR.png\">[[item.size]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("size", TradeUni::getSize);

Which give's me this:

enter image description here

I think that I might have to wrap the image and numbers into a HorizontalLayout with the image being a separate component - I think I could handle that, but I am unsure of how to do the actual rendering of the image. I can probably accomplish it simply with the internal Vaadin Icons set, but I need to use my own little images.. all icons that I am going to use will be at or less than 25 x 25px.

Thank you so much in advance!

Upvotes: 2

Views: 1123

Answers (1)

Leif &#197;strand
Leif &#197;strand

Reputation: 8001

I think you're on the right track, but there's one small detail that causes you trouble. The URL i.imgur.com/3LQBglR.png doesn't define a protocol, which means that the entire string will be treated as a path relative to the location of the hosting page. It will thus try to find a file in a directory named i.imgur.com on your own server.

To fix this, you need to also include the protocol in the image URL, i.e. https://i.imgur.com/3LQBglR.png.

I can also offer a small suggestion for how to make the code easier to read. HTML also supports using ' for enclosing attribute values. This is more convenient to use from Java string since you don't need to use \ to escape ' characters. Your template string could thus be "<div class$='[[item.class]]'><img src='https://i.imgur.com/3LQBglR.png'>[[item.size]]</div>".

Upvotes: 2

Related Questions