displaying a blob image in html page using javascript

Question

I have the following a photo field in a mysql table and I need to display it in an html page. The value of this field is something like: 0xFFD8FFE1127645786966000049492A00080000000C0000010300...

I have tried the following to display it in a datatable:

columns: [
  {data: 'card_id', name: 'card_id'},
  {data: 'card_number', name: 'card_number'},
  {data: 'name_dr', name: 'name_dr'},
  {data: 'fname_dr', name: 'fname_dr'},
  {data: 'position_dr', name: 'position_dr'},
  {data: 'dept_dr', name: 'dept_dr'},
  {data: 'employee_code', name: 'employee_code'},
  {data: 'photo', name: 'photo'},
],
columnDefs: [
{ targets: 7,
  render: function(data) {
    //var img = 'data:image/jpeg;base64,'+base64_encode(data);
    var img = 'data:image/jpeg;base64,'+btoa(data);
    //const blobUrl = URL.createObjectURL(img);

    return '<img src="'+img+'">'
  }
}   

But it does not work and I get an invalid image URL in console. Please help me out!

Update:

Since base64_encode() is a php funciton, I use btoa() but I get only an image icon and not the real image.

Answer 1

You need the FileReader in order to convert the blob to bas64.

See: Convert blob to base64

Answer 2

i think you must Specify the dataType

columns: [
  {data: 'card_id', name: 'card_id'},
  {data: 'card_number', name: 'card_number'},
  {data: 'name_dr', name: 'name_dr'},
  {data: 'fname_dr', name: 'fname_dr'},
  {data: 'position_dr', name: 'position_dr'},
  {data: 'dept_dr', name: 'dept_dr'},
  {data: 'employee_code', name: 'employee_code'},
  {data: 'photo', name: 'photo'},
],
columnDefs: [
{ targets: 7,
  render: function(data) {
    var img = 'data:'+data.type+';base64,'+base64_encode(data);

    return '<img src="'+img+'">'
  }
}