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

Question

Vaadin Flow 提供了一个Image类，代表一个 HTMLimg标签。

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

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

Answer 1

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

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

Answer 2

如果您的资源不在 Web 资源的根目录中，则此文档页面会提示您使用 acom.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);