locked
Display image from database in jquery datatable RRS feed

  • Question

  • User349356202 posted

    Greetings,

    How can i display an image stored in the database in a jquery datatable?

    I used to use this in my view back when i was using a regular table:

    @foreach (var i in Model)
    {

    <td>
    @{
    var base64 = Convert.ToBase64String(i.Image);
    var imgsrc = string.Format("data:image/gif;base64,{0}", base64);
    }
    <img src='@imgsrc' style="max-width:50px;max-height:50px" class="avatar img-circle" />
    </td>

    }

    Now im using a jquery datatabe and i want to display the image in the first column.

    Thank you.

    Thursday, April 12, 2018 5:58 PM

All replies

  • User36583972 posted

    Hi MedNasser,

    You can try to use the columns.render property to create a custom function and return the correct string representation of your image.

     $(document).ready(function() {
        $('#example').DataTable( {
            data: dataSet,
            columns: [
                { title: "Name" ,render: getImg },
                { title: "Position" },
                { title: "Office" }
            ]
        } );
        });
    
        function getImg(data, type, full, meta) {
           //
           return '<img  src="your image path(imgsrc )" />';
        }
    


    You can refer the following thread for getting detailed.

    Jquery datatables display image in one of the columns

    Best Regards,

    Yong Lu

    Friday, April 13, 2018 9:42 AM
  • User349356202 posted

    Hello Yong Lu,

    Thank you for your response. The problem is that i can't convert the Image data to a URL.
    The table's image attribute is "[Image] VARBINARY (MAX) NULL" and it is stored like this in the database "0x424D3E74000000..."

    This is my datatable code:

    $(document).ready(function () {
     $("#employeeTable").DataTable(
                    {
                        "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 6, 7, 8,9] }],
    
                        "ajax": {
                            "url": "/AdminOperations/GetAllTakerR",
                            "type": "GET",
                            "datatype": "json"
                        },
    
    
                        "columns": [
                            {"data": "Image",
                             "render": function (data) {
                                 
                                 return '<img src="data:image/gif;base64,{0},' + data + '" />';
    
                             }  
                            },
    
                            { "data": "TakerId" },
                            { "data": "UserName" },
                       ]
    
                    });
    
            });

    Kind Regards,

    MedNasser

    Friday, April 13, 2018 10:27 AM
  • User36583972 posted

    Hi MedNasser,

    Can you show your image correctly in the regular table(You mentioned in the original post)?

    I suggest you to check the base64 image data, whether it is correct and can show images in <img> label.

    '<img src="data:image/gif;base64,{0},' + data + '" />';

    Best Regards,

    Yong Lu

    Monday, April 16, 2018 9:58 AM