CODEWITHSUNDEEP
imageresourcespngvaadinvaadin-flow
Basil Bourque
Basil Bourque

Reputation: 338564

Load a PNG image file for display on a Vaadin Flow layout as a Image object

Vaadin Flow offers an Image class, representing an HTML img tag.

If I have a file named logo.png stored in the resources folder of my Vaadin 12 app, how do I load that file for display as an Image on a layout?

The example for Image in the Vaadin 8 Sampler shows code no longer relevant as I cannot find a ClassResource class in Flow.

Upvotes: 3

Views: 4483

Answers (3)

Andrian Soluk
Andrian Soluk

Reputation: 474

In my case the problem was in the location of the file: If you use: new Image("img/logo.png", "Logo") then the file location should be /src/main/resources/META-INF/resources/img/logo.png in Spring Boot project

Upvotes: 1

0x0me
0x0me

Reputation: 754

If your resource is not located inside the root for web resources, this doc page gives a hint on using a com.vaadin.flow.server.StreamResource to provide the data by an java.io.InputStream:

StreamResource res = new StreamResource("logo-image.png", () -> {
    // eg. load image data from classpath (src/main/resources/images/image.png)
    return MainView.class.getClassLoader().getResourceAsStream("images/image.png");
});
Image imageFromStream = new Image( res,"Alternativ text description for logo image");
add(imageFromStream);

Upvotes: 4

cfrick
cfrick

Reputation: 37008

You can put that logo under what your build tool/setup considers a root for web resources under the directory frontend/... and then reference that resource like so:

new Image("frontend/images/logo.png", "Acme Inc. Logo")

Upvotes: 8

Related Questions