Display blob data as image

[gge327]

Can you please advise me how to display the blob data from database to display as image in table?

[yavordashew]

Hi Neo Ng,
Thank you for contacting us!
I would like to ask you to give us a bit more context or code example of your use case.
However as much as I understood your case you want to display the data from the Blob into image in the table component.
If you want to have an image to be displayed in the table you can do so like in the code example below:
//In the columns array we will use the formatFunction callback to create a new layout for the column

                {
                    label: 'Symbol', dataField: 'symbol', dataType: 'string', width: 150,
                    formatFunction(settings) {
                        settings.template = <code><img src=&quot;${settings.value}.jpg&quot; /></code>;
                    }
                },

Also note that the value of the dataField must be the name of picture you want to display.
Let me know if that is the case or if it works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[gge327]

Thanks for the fast reply. I used the code below to satisfied my need.
{ label: “Image”, dataField: “img”, dataType: “string”, width: 90,
formatFunction(settings) {
if(settings.value){
let baseString = “data:image/png;base64,” + settings.value.trim();
let imgDom = ‘img_’+settings.data.nonce;
settings.template = ‘‘;
setTimeout(() => {
$(“#” + imgDom).prop(“src”, baseString);
}, 100);
}
},
responsivePriority: 1
},

[Author]

Posts