加载 PNG 图像文件以作为 Image 对象显示在 Vaadin Flow 布局上

Question

Vaadin Flow 提供了一个 Image class，代表一个 HTML img 标签。

如果我有一个名为 logo.png 的文件存储在我的 Vaadin 12 应用程序的 resources 文件夹中，我如何加载该文件以在布局上显示为 Image？

Image in the Vaadin 8 Sampler 的示例显示代码不再相关，因为我在 Flow 中找不到 ClassResource class。

Answer 1

您可以将该徽标放在您的构建 tool/setup 认为目录 frontend/... 下的 Web 资源根目录下，然后像这样引用该资源：

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

Answer 2

如果您的资源不在网络资源的根目录中，this doc page 会提示使用 com.vaadin.flow.server.StreamResource 通过 java.io.InputStream:[=14= 提供数据]

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);

加载 PNG 图像文件以作为 Image 对象显示在 Vaadin Flow 布局上

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

resources

png

image

vaadin

vaadin-flow