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 25px。

提前非常感谢！

Answer 1

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

要解决此问题，您还需要在图片网址中加入协议，即https://i.imgur.com/3LQBglR.png。

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