Vaadin 10 Grid 添加自定义图片图标

Question

我正在使用 Vaadin 10 (Flow) Grid 将数据流式传输到新行，并且我正在尝试向我的 TemplateRenderer 添加自定义图像图标。

我有这样的 TemplateRenderer 设置：

TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
            of("<div class$=\"[[item.class]]\">[[item.size]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("size", TradeUni::getSize);

它在网格单元格中正确显示我的数字，如下所示：

我想在同一个单元格内渲染我的图像，在数字的左侧。

这是我（非常粗糙）尝试使用 html 导入它的尝试：

TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
            of("<div class$=\"[[item.class]]\"><img src=\"i.imgur.com/3LQBglR.png\">[[item.size]]</div>")
            .withProperty("class", cssClassProvider)
            .withProperty("size", TradeUni::getSize);

哪个给我这个：

我认为我可能必须将图像和数字包装到一个 HorizontalLayout 中，图像是一个单独的组件 - 我想我可以处理，但我不确定如何进行实际渲染的图像。我可能可以简单地使用内部 Vaadin 图标集来完成它，但我需要使用我自己的小图像..我将要使用的所有图标都将等于或小于 25 x 25 像素。

在此先感谢您！

Answer 1

我认为您的方向是正确的，但是有一个小细节给您带来了麻烦。 URL i.imgur.com/3LQBglR.png 没有定义协议，这意味着整个字符串将被视为相对于托管页面位置的路径。因此，它将尝试在您自己的服务器上名为 i.imgur.com 的目录中查找文件。

要解决此问题，您还需要在图像 URL 中包含协议，即 https://i.imgur.com/3LQBglR.png。

我还可以就如何使代码更易于阅读提供一个小建议。 HTML 还支持使用 ' 来包含属性值。使用 Java 字符串更方便，因为您不需要使用 \ 来转义 ' 字符。因此，您的模板字符串可以是 "<div class$='[[item.class]]'><img src='https://i.imgur.com/3LQBglR.png'>[[item.size]]</div>".

Vaadin 10 Grid 添加自定义图片图标

Vaadin 10 Grid add custom image icon

java

vaadin

vaadin-grid

vaadin10