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