Search code examples
imageresourcespngvaadinvaadin-flow

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.


Solution

  • 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")