图片组件是否支持设置base64的字符串

请问图片组件能否在后台用代码设置base64的字符串来显示图片内容?

我感觉这样就行,你试下:

byte[] imgBytes = Base64.getDecoder().decode(yourImageString);
image.setSource(StreamResource.class).setStreamSupplier(() -> new ByteArrayInputStream(imgBytes));

这样是可以,不过多了一次解码。能否实现H5里的src=“data:image/jpeg;base64,”这样的方式呢?
试了下没成功

this.image.setSource(UrlResource.class)
                                    .setUrl(new URL("data:image/" + kind +";base64,"+base64));

嗯。已经通过 InputStream 支持二进制数据了,就不支持后面这种了。解码是不可避免的。而且 CUBA 都是后台程序,解码都是在后台做,这两种区别无非是解码的代码是自己写还是框架实现。

不对吧,这种方式是客户端的浏览器解码,不是后台解码。

不是的。Vaadin 的基本思想就是在服务端进行计算和创建 UI 元素,在浏览器渲染需要的 html/css/js 都是在服务端创建好之后再发送给浏览器的。

我知道啊,但是你后台传给页面的是直接的BASE64的字符串啊,不需要做解码了。

查了下,CUBA 是不支持的。但是 Vaadin 支持:

CubaImage unwrap = image.unwrap(CubaImage.class);
unwrap.setSource(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=="));
1 个赞

谢谢。nice!