Working with Network saved pictures

Vaadin 6 / 7 / 8
1

Im new in Vaadin and my first project ist to program an webapp to manage employees and their cv`s. Backend ist plain java with vaadin and a mysql db. Most works finde but i cant display images in my app. Aktually i save the unc path \fileserver\pic\employee.png to the database and then i tryed to do something like this.

Image image = new Image();
image.setSource(new ExternalResource(“\fileserver\pic\employee.png”));
image.setWidth(“100px”);
image.setHeight(“100px”);
VerticalLayout l = new VerticalLayout(image);

Bit it does not work.

2

Yeah this works fine but only on initial pageload.

I have a grid where you choose the employee you want to edit. The grid contains only pre and surename. On the right of the grid you will see all deatails in different textfield etc to edit the one you selected. All loads fine but the picture not.

//Variable
Embedded pic = new Embedded(“PIC”);
…

//This is the listener from the grid
employeeGrid.addSelectionListener(e → updateForm());

//If i to it in the init method the pic loads but so i cant load the specific pic from every employee bei the selected line in the grid
FileResource resource = new FileResource(new File(“\\source\employee.png”));
Embedded image = new Embedded(“External Image”, resource);
HorizontalLayout midVHorizontalDown = new HorizontalLayout(pic, image);

//Here the method.
private void updateForm() {
if (employeeGrid.asSingleSelect().isEmpty()) {
employeeGridBinder.removeBean();
} else {
employee = employeeGrid.asSingleSelect().getValue();

         if(employee.getpicpfad().isEmpty() == false) {
             FileResource resource = new FileResource(new File(employee.getpicpfad()));
             Embedded embedded = new Embedded("DB Image", resource);
             embedded.setWidth("100px");
             embedded.setHeight("100px");
             employee.setpic(embedded);     
         }   
         employeeBinder.setBean(employee);
     }
}
3

ExternalResource references images that the browser can download, so typically it’s a http:// or ftp:// link. You need to load the image server-side, then serve it to the client. Please try something like this instead: new FileResource(new File(“\fileserver\pic\employee.png”))