HTML Elements Forums Charts & Data Viz Table Display blob data as image

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Neo Ng 1 month, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #101748
    Avatar
    Neo Ng
    Participant

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

    #101752
    Avatar
    Yavor Dashev
    Participant

    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/

    #101755
    Avatar
    Neo Ng
    Participant

    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
    },

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.