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

Question

我正在使用Vaadin10 (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图标集来完成它，但是我需要使用我自己的小图像。所有的图标，我将使用将在或少于25x25px。

提前谢谢你！

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>"。