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

这给了我这个:

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

提前非常感谢!

Answer 1

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

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

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