Adding image on app

Flow
1

Hi,

I previously used this code as example in college but am trying to add image to new app I’ve created and it doesn’t display anything. Below is the old code and my newly adapted code. Thanks for your help!

Old Code:
// Find the application directory
String basepath = VaadinService.getCurrent()
.getBaseDirectory().getAbsolutePath();

// Image as a file resource
FileResource resource = new FileResource(new File(basepath +
“/WEB-INF/Images/Image.jpg”));

// Show the image in the application
Image image = new Image(“Image from file”, resource);
image.setWidth(300, Unit.PIXELS);

// Let the user view the file in browser or download it
Link link = new Link(“Link to the image file”, resource);
final VerticalLayout layout = new VerticalLayout();

    Label linkText = new Label ("{\"url\":\"" + link.getData() + "\"}"); 

    Button button = new Button (" Is this a picture of a person?");
	button.addClickListener(e -> {
            layout.addComponent(new Label( 
                    CognitiveServices.detectFaces(basepath +
                    "/WEB-INF/Images/Image.jpg")));
            
         
    });
    
    layout.addComponents(image, link, linkText, button);
    
    setContent(layout);

}

New Code:
@Route(value=“data”, layout = MainLayout.class)
public class DataView extends Composite implements HasComponents {

	public DataView() {
	Image image = new Image("/frontend/Images/Image.jpg", "Alternative image text");
	VerticalLayout layout = new VerticalLayout();
	layout.add(image);


}

}

2

Hi Pia,

Do you add the layout to the DataView? Should look something like this:

@Route(value="data", layout = MainLayout.class) public class DataView extends Composite <Div> implements HasComponents {

	public DataView() {
	  Image image = new Image("/frontend/Images/Image.jpg", "Alternative image text");
	  VerticalLayout layout = new VerticalLayout();
	  layout.add(image);
	  getContent().add(layout);
    }
}

Also note “extends Composite Div”

3

No, but it works adding that line. Thank you so much for your help!