Broken images in vaadin version 7.6.3

Hello.
My problem is described bellow.

When I scroll to the bottom of table and table loads it content, my images( images from
StreamResource
that are
Embedded
, i stored my images as blob in database) get broken.

First rows of table that contains
Embedded
images are shown just fine, but when i scroll down, the pictures that looks fine get broken.


getAllPartners
method (here i load
blob
image from database):

public static Vector<PartnerDto> getAllPartner() {
            Vector<PartnerDto> result = null;
    
            PreparedStatement st = null;
            Connection conn = null;
            ResultSet rs = null;
            try {
                conn = Connect.getConnection();
                String sql = "select part_id,name, surname, picture from partner order by name, surname ";
                st = conn.prepareStatement(sql);
                System.out.println(sql);
                st.execute();
                rs = st.getResultSet();
                result = new Vector<PartnerDto>();
                while (rs.next()) {
                    PartnerDto dto = new PartnerDto();
                    dto.setPart_id(rs.getInt("part_id"));
                    dto.setName(rs.getString("name"));
                    dto.setSurname(rs.getString("surname"));
                    Blob imageBlob = rs.getBlob("picture");
                    if(imageBlob!=null){
                        InputStream binaryStream = imageBlob.getBinaryStream(1, imageBlob.length());                
                        dto.setPicture(binaryStream);
                    }else{
                        dto.setPicture(null);
                    }
                    result.addElement(dto);
                }
            } catch (SQLException e) {
                result = null;
                e.printStackTrace();
                System.out.println(e);
            } finally {
                Connect.closeConnection(rs, st, conn);
            }
            return result;
        }
[/code]My table ([b]
tPartners
[/b]) initalization:     
           [code]
            tPartners.addContainerProperty("Slika uporabnika", Embedded.class, null);
            tPartners.addContainerProperty("Ime", String.class, null);
            tPartners.addContainerProperty("Priimek", String.class, null);
            tPartners.addContainerProperty("Rojstni datum", String.class, null);
            tPartners.addContainerProperty("Rojstni kraj", String.class, null);
            tPartners.addContainerProperty("Naslov", String.class, null);
            tPartners.addContainerProperty("Pošta", String.class, null);
            tPartners.addContainerProperty("Emšo", String.class, null);
            tPartners.addContainerProperty("Šola", String.class, null);
            tPartners.addContainerProperty("Razred", String.class, null);
            tPartners.addContainerProperty("Poklic", String.class, null);
            tPartners.addContainerProperty("Telefon", String.class, null);
            tPartners.addContainerProperty("Mail", String.class, null);
            tPartners.addContainerProperty("Klubska številka", String.class, null);
            tPartners.addContainerProperty("Številka kartice", String.class, null);
            tPartners.addContainerProperty("Datum včlanitve", String.class, null);
            tPartners.addContainerProperty("Opomba", String.class, null);
            tPartners.addContainerProperty("File type", String.class, null);
            
            tPartners.setSelectable(true);
            tPartners.setImmediate(true);

Code bellow shows how i load images in table:

            
                 //get all partners
                 Vector<PartnerDto> vResutl = DBLogika.searchPartner(text);
                
                for (int i = 0; i < vResutl.size(); i++) {
                    //class that represent PartnerDto
                    PartnerDto dto = vResutl.elementAt(i);
                    
                    String bd = "";
                    String din = "";
                    
                    if (dto.getBorn_date() != null) {
                        bd = sdf.format(dto.getBorn_date());
                    }
                    
                    if (dto.getDate_in() != null) {
                        din = sdf.format(dto.getDate_in());
                    }
                    
                    Embedded emb=new Embedded();
                    
                    StreamResource.StreamSource source = new StreamResource.StreamSource() {
                        
                        public InputStream getStream() {
                             //get inputstream from database, i save my image as longblob in database
                             return dto.getPicture();
                            
                        }
                        
                     };
                     
                   //uniq name for every file
                   SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
                    String filename = "mytablepic" + df.format(new Date()) + ".png";
                    
                   StreamResource sourceone=new StreamResource(source, filename);
                  
                   emb.setHeight("200px");
                   emb.setWidth("150px");
                   
                   emb.setSource(dto.getPicture()==null? new ThemeResource("images/user_pic.jpg"): sourceone); 
    
                     tPartners.addItem((new Object {emb, dto.getName(), dto.getSurname(), bd, dto.getBorn_place(), dto.getAddress(),
                                dto.getPostDto().getPostName(), dto.getEmso(),
                                dto.getSchool(), dto.getPartClass(), dto.getJob(), dto.getPhone(),
                                dto.getMail(), dto.getClub_number(), dto.getCard_number(),
                                din, dto.getDesc(),dto.getFileextention()}), dto);
                     
                }


What i am doing wrong ?

Two images that shows my problem:


https://www.dropbox.com/s/y9gnoxbsgvc2jm7/picture.png?dl=0


https://www.dropbox.com/s/q19hsiq3fb2vto4/picturenormal.png?dl=0

I am running my application on localhost on
tomcat v8.0 server.

When i inspect images in firefox with firebug, it tells me: Could not load the image.


Somehow when i scroll, and tables need to load it contant, images get broken…


How could i solve this problem? Please help me :slight_smile:

Hi slodevmyname,

I think you can’t reuse the InputStream. Try storing the data as byte array in your DTO and return a fresh (ByteArray)InputSteam instance everytime StreamSource#getStream is called.


But this approach will hit your ram pretty hard
, because you have to keep all images in the servers memory. Even if you don’t need them.

I’d suggest that you create a custom StreamSource implementation that receives the image from the database every time StreamSource#getStream is called. Because you only need the image data if the clientbrowser asks for it. And this way the image data can be garbagecollected if it’s not needed anymore.

Tnx you very very very much :wink: God bless you. Now everything is working fine.