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

【问题标题】：Load a PNG image file for display on a Vaadin Flow layout as a Image object加载 PNG 图像文件以作为 Image 对象在 Vaadin Flow 布局上显示
【发布时间】：2018-11-09 07:14:53
【问题描述】：

Vaadin Flow 提供了一个 Image 类，代表一个 HTML img 标记。

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

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

【问题讨论】：

标签： image resources png vaadin vaadin-flow

【解决方案1】：

您可以将该徽标放在您的构建工具/设置认为是frontend/... 目录下的网络资源根目录下，然后像这样引用该资源：

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

【讨论】：

【解决方案2】：

如果您的资源不在 Web 资源的根目录内，this doc page 会提示您使用 com.vaadin.flow.server.StreamResource 通过 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);

【讨论】：