Click here to Skip to main content
15,794,447 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I wanted to display binary image from my database in Jquery datatable, I have tried a few ways but did not work as well. This is my DataTable:
"columns": [
    { "data": "Product_ID" },
    { "data": "Product_Name" },
    { "data": "Product_Description" },
    { "data": "Product_Type" },
    { "data": "Product_Quantity" },
      "data": "Product_Image",
      "render": function (data) {
              var img = 'data:image/png;base64,' + data;
              return '<img src="' + img + '" height="50px" width="50px" >';

Please correct me if I make any mistakes, thank you :)

What I have tried:

"data": "Product_Image", "name": "Product_Image",
"render": function (data, type, row, meta) {
    var imgsrc = 'data:image/png;base64,' + data; 
    return '<img class="img-responsive" src="' + imgsrc +'" alt="Product_Image" 
    height="100px" width="100px">';
Updated 22-May-22 23:05pm
Richard Deeming 6-Jul-20 8:19am    
You'll need to check how the Product_Image column is transmitted. Is it already a base64 string? It it definitely a PNG image? Is it within the length limit for data: URIs in your browser?

1 solution

Work for me
"columns": [ 
{ "data": "profile_pic", 
"render": function (data, type, full, meta) {
 return '<img src='+baseUrl+'/uploads/images/'+data+'>'; 
} },

From url:
    "data": "imageUrl",
    "render": function(data, type, row) {
        return '<img src="'+data+'" />';
Share this answer
Richard Deeming 25-May-22 5:19am    
As I said two years ago, when this question was posted, there's no way to know how to fix the problem without knowing precisely how the data is transmitted.

Your solution assumes the data is transmitted as the path to an image. But there is nothing in the question to support that assumption. Based on the question, it's transmitted as a Base64-encoded version of the image contents, which would not work with your solution.

The OP never replied to the request for clarification, so we'll probably never know what the data actually looks like. A solution based on an (almost certainly incorrect) assumption doesn't really help anyone.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900