将图像插入 vaadin 网格

Question

如何将图像（blob 类型）显示到 vaadin 网格中？

有什么好的例子吗？

如何为将保存 blob 的列定义正确的 class（我将我的图像存储为 blob mysql）在 vaadin 网格中键入图像？ 如果用户没有图片，我还想在来自资源 ("/WEB-INF/images/user_pic.jpg") 的 vaadin 网格中显示默认图片 (user_pic.jpg)。

伪代码：

if (user have picture)
  show his picture in grid
else 
 show default picture from resources

Answer 1

1)

I also want to show default picture (user_pic.jpg) in vaadin grid from resources ("/WEB-INF/images/user_pic.jpg") if user doesn't have picture.

这应该可以通过使用 ImageRenderer shipped with Vaadin using a ThemeResource 轻松实现，但您可能需要将图像移动到主题目录下：webapp/VAADIN/themes/your_theme/images

2)

How to show images (blob type) into vaadin grid ?

据我所知，（还）没有内置渲染器可以满足您的需求，this question in the Vaadin forum. So far the ImageRenderer sources 似乎证实了这一点，表明它仅支持 ExternalResource 或 ThemeResource:

@Override
    public JsonValue encode(Resource resource) {
        if (!(resource == null || resource instanceof ExternalResource || resource instanceof ThemeResource)) {
            throw new IllegalArgumentException(
                    "ImageRenderer only supports ExternalResource and ThemeResource ("
                            + resource.getClass().getSimpleName() + " given)");
        }

您可能必须实现自己的渲染器。 Here and here 您可能会找到一个起点。顺便说一句，如果您决定编写您的实现，请考虑与世界其他地方分享它，我相信很多人会从中受益:-)

稍后编辑：

我刚刚想到一个 hack 可以与标准 ImageRenderer 一起使用。如果您可以存储编码为 base64 字符串的图像，那么您可以将它们包装在 ExternalResource 中，执行如下操作：

public static class MyBean {
    private ExternalResource image;
    private String name, surname;

    public MyBean(ExternalResource image, String name, String surname) {
        this.image = image;
        this.name = name;
        this.surname = surname;
    }

    public ExternalResource getImage() {
        return image;
    }

    public String getName() {
        return name;
    }

    public String getSurname() {
        return surname;
    }
}

public class MyGridComponent extends VerticalLayout {
    public MyGridComponent() {
        BeanItemContainer<MyBean> dataSource = new BeanItemContainer<>(MyBean.class);
        Grid grid = new Grid(dataSource);
        addComponent(grid);


        grid.getColumn("image").setRenderer(new ImageRenderer());
        grid.setColumnOrder("image", "name", "surname");

        dataSource.addItem(new MyBean(
                new ExternalResource("data:image/png;base64,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"),
                "Agent",
                "Smith"));
        dataSource.addItem(new MyBean(
                new ExternalResource("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAAeAB4DASIAAhEBAxEB/8QAGgAAAQUBAAAAAAAAAAAAAAAABAACAwUGB//EABcBAQEBAQAAAAAAAAAAAAAAAAADAQT/2gAMAwEAAhADEAAAAeftG1UdMKjrOWzrVaZPLo6E/8QAHBAAAgMBAQEBAAAAAAAAAAAAAgMBBAUTABES/9oACAEBAAEFAurI8wvvsSuJ1rPMzFDZEcp05uHITUcULmj09YWd5kqDPturT2ot6NCPzGsqCrQ6SD//xAAYEQADAQEAAAAAAAAAAAAAAAAAARESIf/aAAgBAwEBPwGmVBIs4f/EABoRAAMAAwEAAAAAAAAAAAAAAAABAhESITL/2gAIAQIBAT8BeqL9Mq3nhXVk/8QAIhAAAgEDAwUBAAAAAAAAAAAAAQIAAxESITFRBBMyYXFB/9oACAEBAAY/AiwIZOOIvyNVqDKxsAZoopkcTJVNjO4d76Q0zkr03yYcy7GeFk+Smh0VBZRx7nTspL06gwJb8MYuqlTtfaHSEiE+xBP/xAAgEAEAAgICAwADAAAAAAAAAAABABEhMUFxUWGBoeHx/9oACAEBAAE/IUCo2XHxOkvC2+C3bMZsquH5CaGArmEQAJy/EYfJBFl7bXnlmm0Bkc5ocwrR57Tnzl/ydR6tL2f1AM643KBA6mSoX17v9wvDgcvqf//aAAwDAQACAAMAAAAQbSwf/8QAGREBAQADAQAAAAAAAAAAAAAAAQARITFB/9oACAEDAQE/EMjsMW0bhZeL/8QAGREAAwEBAQAAAAAAAAAAAAAAAAEhETFB/9oACAECAQE/EFptNNSIMDNHvh//xAAgEAEAAgMAAgIDAAAAAAAAAAABESEAMUFRcWGhgbHw/9oACAEBAAE/EEKNKCHiVhgtgiY9YPRfsQFDuwjH2ZkZ/SfnLm8Csesmc0pBkdv6zFIoowsAo80IeB7iY82yeH0YIXBNgfMqHdOQ5MdczRtRb6CMWfSwfqtS1FwDesnomp/i6C6crJG7suCXCBWib/WA5EWcgiSeNsmRXpiyDr5XP//Z"),
                "There is",
                "No spoon"));
        dataSource.addItem(new MyBean(
                new ExternalResource("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A860jSYdNKrYqPKRgT3Pz8Yz6Gum1AeEvAXhqbU9elkjt3kKmMnfLM6qcLGvbAOM5xUEyG0vPsJh+ztbSyxhFbphuMke3FR/tA+Bf+Ej0rwnqEdvcXem6dDc395Z2UW6ecDa21MkAklQuOvPQ9K8/T4mfNrl5faS0/rQ4Xwr8cPA2vvdf2vocuhaZbpsW8ikMxEuMqGXA6gHkcdq9E1nwhZ6bFpN/pskV7C8a3scqrhGD4II/D1r2L9nL9p/4S3PwbvIfE/hfWLHT7u+TQ3s7rRHulaWWM7Y96K2QQhOTjBx0rmfHGgW3w+8N6boEQMn2K3WFQxyyKWLhP+Aqdufaq1ktR+/VXvK3kcVaaZfeLdUuJlZjcSzGW4ZuBuyWJPbrmr2s/Fzw5qWkXOh6PcveT6AR9pvkx5D+Y33YyDlsFDz09K+cfjh+07LJpc3hfw3ZyaRZHKXMxbMt0vGAcD5V/wBkE57nivGPC3iDXPC2r/bLC6jvEukC3UEmfLcdgcY5wc5HTNEorl33NK1Lmw7jffa5+xn7K9/cw/DvxJ4nnvor2LVJwsRjn3+WIgVCheccEk9DnHGOa8I+J2ty6v4mvLhlPlurZGOM/dH8hXzLqH7aGoeEvCPw60zwx4ds/DB8M3t3c3P2ZjIuotcLh/NBAyMZGOT0wRgV7P4J+Ofhn4yyRRPZjRNTuz+6USb4JHH8OTyhyRgNnORzSg0opE4dKlSiuh//2Q=="),
                "The",
                "One"));
    }
}

这应该会让你得到类似的东西：

Answer 2

我的问题的解决方案：

我使用了 table 而不是网格。这是我将图片嵌入 table:

的代码

        Person tr = tap.get(i);

        Embedded emb=new Embedded("myembeddedimage");

        StreamResource.StreamSource source = new StreamResource.StreamSource() {

            public InputStream getStream() {
                 //get blob inputstream
                 return new ByteArrayInputStream(tr.getPicture());
            }

         };
       //create StreamResource from blob inputstream and name it.
       StreamResource sourceone=new StreamResource(source, "mypicture.png");
       sourceone.setCacheTime(0l); 
       emb.setHeight("200px");
       emb.setWidth("150px");
       //if user doesn't have image, the embedded image source is set to image from resource
       emb.setSource(tr.getPicture()==null? new ThemeResource("images/user_pic.jpg"): sourceone);

       CheckBox checkbox=new CheckBox();
        checkbox.setConvertedValue(false);

       tPartners.addItem((new Object[] {emb,
                (tr.getName() +" "+ tr.getSurname()), -2,checkbox}),tr);

我希望有人会发现此代码有用。如果您的图像（例如 blob）存储在数据库中，此代码是如何将图像插入 table 的很好示例。

将图像插入 vaadin 网格

Insert image to vaadin grid

java

resources

blob

image

vaadin