2

我正在使用 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 像素。

非常感谢您！

4

1 回答 1

2

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

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

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

于 2018-04-13T06:38:43.193 回答