1

I'm trying to display a tiny little image (16x16 pixels) in a TreeGrid Column.

 treeGrid.addComponentColumn(i -> new Image("file://c:/temp/reddot.png", "alt")).setHeader("Preview");

In my IDE, this file url is underlined, I can click it, it opens the image in my browser. So, the file seems ok and exists. But somehow, it does not appear in the grid column and the "alt" text doesn't appear either. Hm. Anyone any idea what's going wrong ? Unfortunatly I don't see any error messages...

thanks, Thorsten

PS: I'm using Version 13.

Jay
  • 1,688
  • 5
  • 20
  • 34
user1119859
  • 669
  • 2
  • 9
  • 20
  • 1
    Can you try putting all resources that your application needs in the appropriate `frontend` folder? [Here](https://vaadin.com/blog/vaadin-10-and-static-resources) is a blog that explains where your frontend folder needs to be located. – kscherrer Mar 28 '19 at 15:13
  • Tried it - but since I use spring boot and am stil in "development mode", I have noch real jar/war file. So it didn't work. But thanks anyway for that link. Very interessting. – user1119859 Mar 29 '19 at 08:08
  • IIRC spring boot also uses a jar/war in the end. After you run your app, see if there is a `target` folder in your project root. It should contain the jar/war. – kscherrer Mar 29 '19 at 08:24
  • 1
    Create a folder `src/main/webapp/frontend/img` and put your image in there. When creating your Vaadin `Image` object, use this path: `new Image("frontend/img/reddot.png", "alt")` – kscherrer Mar 29 '19 at 08:24
  • suggestion for non related code improvement: If you always show the same image for all rows, you can create the Image once beforehand, and use the same image instance in the addComponentColumn. If the image depends on certain attributes of the respective item, then ignore this comment. – kscherrer Mar 29 '19 at 08:31
  • You probably need to use a [component renderer](https://vaadin.com/docs/v13/flow/components/tutorial-flow-grid.html#using-component-renderers) for that column. – Morfic Mar 29 '19 at 14:04
  • What do you see when you inspect the grid cell? Is the `` tag present? – Steffen Harbich Apr 01 '19 at 17:12

1 Answers1

0

You could try to put image under META-INF/resources. Then you could reference image directly by name like this : Image im=new Image("kissa.jpg","Random picture");

Otherwise, you could create a inside and then reference mentioning also folder. In the picture below I have this set-up Image location

And this is the output : enter image description here

The whole code: 

    TreeGrid<Person> grid = new TreeGrid<>(Person.class);
    grid.setHierarchyColumn("name");
    grid.addComponentColumn(e->{
    if(e.getName().equals("daughter")) {
            Image im=new  Image("test/cat.jpg","Random picture");
            im.setWidth("200px");
            im.setHeight("150px");
            return im;}
    else { 
           Image im=new Image("kissa.jpg","Random picture"); 
           im.setWidth("200px");
           im.setHeight("150px");
           return im;}}).setHeader("Cat");
    Person dad = new Person("dad", null);
    Person son = new Person("son", dad);
    Person daughter = new Person("daughter", dad);
    List<Person> all = Arrays.asList(dad, son, daughter);

    all.forEach(p -> grid.getTreeData().addItem(p.getParent(), p));

    add(grid);

The example of TreeGrid is copied from here: Using new features with the LTS version: case TreeGrid

anasmi
  • 2,562
  • 1
  • 13
  • 25