Java jTable adding html img tag with base64 image

Question

New to Java and this JTable. I am wanting to add an image to one of the cells in a column. I am able to add the image but its not displaying the image, just an image of a broken image link:

This is the code I am using in order to populate those images:

 @SuppressWarnings("unused") public void createAvatar(String b64image, String name, int row, int col) { String html = String.format("<html><table><td><img alt=\\"Avatar\\" style=\\"position: absolute; top: 0px; left: 0px;\\" src=\\"data:image/png;base64,%s\\"/>%s</td></table></html>", b64image, name); table.setValueAt(html, row, col); }

private void initialize() throws Exception {
...MORE CODE HERE...
try {
    for (int i = 0; i < b64s.size(); i++) {
       createAvatar(b64s.get(i), names.get(i), i, 8);
    }
} catch(Exception e) {
    JOptionPane.showMessageDialog(null, e);
}

table = new JTable(model) {
   @Override
   public boolean isCellEditable (int row, int col)
   {
        return true;
   }

   public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int col) {
        return null;
   }

   public Component prepareRenderer(TableCellRenderer renderer, int row, int column) {
        Component c = super.prepareRenderer(renderer, row, column);

        if (c instanceof JComponent) {
             if(column == 4){
                JComponent jc = (JComponent) c;
                jc.setToolTipText(getValueAt(row, column).toString());
             }
        }

        return c;
   }
};

table.getModel().addTableModelListener(new TableModelListener() {
   @SuppressWarnings("static-access")
   public void tableChanged(TableModelEvent e) {
   ...MORE CODE HERE...
});

table.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);

for (int i = 0; i < b64s.size(); i++) {
   createAvatar(b64s.get(i), names.get(i), i, 8);
}
}

If I use a hard coded drive path like this:

@SuppressWarnings("unused")
public void createAvatar(String b64image, String name, int row, int col) {      
     String html = String.format("<html><table><td><img alt=\"Avatar\" style=\"position: absolute; top: 0px; left: 0px;\" src=\"%s\"/>%s</td></table></html>", "file:///C:/Users/xxxxxx/eclipse-workspacePhoton_xxxxx/xxxxx/resources/avatarB.png", name);
     table.setValueAt(html, row, col);
}

It works just fine:

And when I do the same thing but with a hard coded base64 string:

String html = String.format("<html><table><td><img alt=\"Avatar\" style=\"position: absolute; top: 0px; left: 0px;\" src=\"data:image/png;base64,%s\"/>%s</td></table></html>", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUA....aZ9htT6WuJRFzV3epJcukNncYXzbPKIUjXzcWmUe+K7lQ3q/tn0/Gbk89e3sSussuZpu2D1Wj0P0mjaW2u8Si/mHPSBJpmUUM8x9EVbrT4j3P9QAAAABJRU5ErkJggg==", name);

It displays the same as non-hard coded string:

And copying the HTML variable from the code:

<html><table><td><img alt="Avatar" style="position: absolute; top: 0px; left: 0px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcE.....ussuZpu2D1Wj0P0mjaW2u8Si/mHPSBJpmUUM8x9EVbrT4j3P9QAAAABJRU5ErkJggg=="/>Bob</td></table></html>

 <html><table><td><img alt="Avatar" style="position: absolute; top: 0px; left: 0px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAEFUlEQVRIS82VYUxbVRTH33AbZoiZzk03BkQQp9Mw55yS6eIcg+BAqlLSOUzYCBoGGThHtuiHdTi3jKlBZWqUmAnrJjSUwVpZQAeidHTaQul7UGhf11H62s6q0Q9Dk2U73tve9/bu+kLIPvlP/mnSc87/13tPXx7zv5JVEBaNOv2rOE/waYcnlMn5fPdqtdo4Ur592e3BhDE+UMHxgpnlA/9yfABEs27hOvr0cG7hGOu6kk5G5i4AmOdwBV7n3IFQNFSAYZaHxve18E6ZBt6rfgPaWlrA4ZoWodfQj2h0hsOJJGJ2cRy3EA19TYbB8G0raNanwYtpCbD5AYZy6fOZMPCzRQRhOycuBx8kUcrS6/V3sJ7AaXHojL4dclYuiAmXW/3ESrhoG5ODfKzbn0wiY8Xywj6x2e68DMVrUyJBH1e9AsPtn0DXR3uh+PH7YkDayp1yCKA9/WIFWEBib8oxGUpDO/hHbGxtbo4EVGavhr/sJslTA6fg7fwnKUhBxmIYdU5RIHSaWhJ9U6jQJG86VPNmJMBQX0NBsP8cPgvtR3eDJnOpBOrt7bsFIlzp93rvJPEM43SGE9EprsqbKvKfg+zl88Db1xIDEf2HrQtOHiiHzcsZONn0JQXBZnn/NoJgmPFLQi5VdAugWr0UCtIWRYKUAHJrMpdB/f4aCkByviEIeuHYFisbuQLVw3crht7qik2rYMemNRQAGz3IIwSB9uEONMiLHW366ELncBK8n1cfXRy52sEhGwVBDhEEPon/U3nx+JG6CAQPTv2oUwwXPXTqmLR8XdNXcgB2mCDQSVz+A/JibUmhNHjmg7cUw0UfLs2VepsaPpQD8E4mCIJhRl3TarHgmJyGwkeWSIP4vvGVKAGwS9atkHo/O3qIgqCH0kAQDOPxhO5HX17Dhd6e89KQaPzEKwGGdPWwZUWc1LdHs5WGeIJVBBEV6xLO4ULDwXcpgOi67S+Ab+B0JByfTH+kCvJS46kevEP8p8E56Kpmxv1/LyHxUaG/8bOocGNXwUZqUPSWpDiwdzRKkB1ZqYp92l2lUQgfOE6iaaH3w4mt6XfFDOYkzQddXSV1VWzX51D02LKY3oNVO/EpAvjNSWJpdXZ2JuamxI/Lh4rTU+BcowmCwm8QHv8VwtY++J0dhJDXCxMjl6B6XR4F+aL+8MzYpLCRRCpLnZWRlJscP4YHXsvIAENhD5iKLoDtBA+cyQfnd9tguNkDnNEH31dYwagahH3rNRFATvLCq4a2tjwSNbvKNmxIfOmhe5p1+a03jCozCprdZ1U/QfmaZ9htT6WuJRFzV3epJcukNncYXzbPKIUjXzcWmUe+K7lQ3q/tn0/Gbk89e3sSussuZpu2D1Wj0P0mjaW2u8Si/mHPSBJpmUUM8x9EVbrT4j3P9QAAAABJRU5ErkJggg=="/>Bob</td></table></html>

Does display just fine (meaning the base64 image is correct and working)

So can I not use the Base64 version inside the HTML for the jTable?

Answer 1

Instead of using html you could try to use swing components directly. From your question it looks like you have a column that represents a user avatar so let's say the data is of type Avatar .

Then you could set a custom cell renderer for that column type and have that renderer return a JLabel . That label can take a text as well as an icon, so the code could look like this (simplified):

JTable table = ...;

table.setDefaultRenderer( Avatar.class, new TableCellRenderer() {      
  @Override
  public Component getTableCellRendererComponent( JTable table, Object value, boolean isSelected, 
                                 boolean hasFocus, int row, int column )
  {
    Avatar avatar = (Avatar)value;

    //you might want to think about caching the icon and maybe even the label.
    Icon icon = new ImageIcon(Base64.decode( avatar.getBase64Image() ));
    return new JLabel(avatar.getName(), icon, JLabel.LEFT);
  }
} );

Java jTable adding html img tag with base64 image

Question

1 answers

solution1
1 ACCPTED 2019-02-01 09:04:28

Java jTable adding html img tag with base64 image

Question

1 answers

solution1 1 ACCPTED 2019-02-01 09:04:28

solution1
1 ACCPTED 2019-02-01 09:04:28