How to show pictures in a table using jQuery DataT

Is that possible that I can show my URL images in data-table? I returning my data in array as it shown here in my code and returning the URL image with...

Before I knew the DataTables I was using the default table an put my table in <img src=""> so how can I use it here?

<?php	
class basket_report{
function show_basket_report(){
	$connect_mysql= @mysql_connect($server,$username,$passwor) or die ("Connection Failed!");
	$mysql_db=mysql_select_db("GP15",$connect_mysql) or die ("Could not Connect to Database");
	$query = "SELECT * FROM reportBasket where notifyEmployee='1'";
	$result=mysql_query($query) or die("Query Failed : ".mysql_error());
	$objects= array();
    while($rows=mysql_fetch_array($result))
    {
                    $objects[]= $rows;
    }
	$data_set = "[";
    $count_rows = count($objects);
    $count = 1;
    foreach($objects as $object){
       $data_set .= "['". $object['reportID'] ."', '". $object['email'] ."', '". $object['date'] ."', '". $object['time'] ."', '". $object['BasketID'] ."', '". $object['notifyEmployee'] ."','". $object['replyedPhoto'] ."']";
        if($count != $count_rows){
            $data_set .= ",";
            $count++;
        }
    }
    $data_set .= "]";
		return $data_set;
	}
?>

<html>
<head>
<script src="js/jquery-1.11.1.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script>
 
$(document).ready(function() {
 
    $('#table_id').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "report_id" },
            { "title": "email" },
            { "title": "date" },
            { "title": "time"},
			{ "title": "basket_id"},
			{ "title": "notify_Employee"},
				{ "title": "replyed_photo"}
		
        ]
    } );   
} );
</script>
</head>
<body>
<table id="table_id" class="display">
 
</table>
<?php
include('class_report_basket.php');
$basket_report = new basket_report();
  
?>
<script>
var dataSet= <?php echo $basket_report->show_basket_report(); ?>;
</script>
</body>
</html>

You can use columns.render option to define callback function to render cell content based on its data.

$('#example').DataTable({
    "ajax": {
        url: "/test/0",
    },
    "columns": [
        { "data": 0 },
        { 
          "data": 1,
          "orderable": false,
          "sortable": false,
          "render": function (data, type, row, meta){
             // If data will be displayed
             if(type === "display"){
                return '<img src="' + data + '">';

             // Otherwise, if search/filtering is performed
             } else {
                return data;  
             }
          }
        }
    ]
});

Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't which to specify any options). Alternatively, you can use columnDefs to target specific columns.

See the example below for code and demonstration. Please note, that I'm using jQuery Mockjax plug-in just for the sake of demonstrating Ajax request, it's not needed for production code.

$(document).ready(function () {
   // AJAX emulation for demonstration only
   $.mockjax({
      url: '/test/0',
      responseTime: 200,
      responseText: {
         "data": [
            [ "100x150", "http://placehold.it/100x150" ],
            [ "200x150", "http://placehold.it/200x150" ],
            [ "300x150", "http://placehold.it/300x150" ]
         ]
      }
   });

   $('#example').DataTable({
       "ajax": {
           url: "/test/0",
       },
       "columns": [
           { "data": 0 },
           { 
             "data": 1,
             "orderable": false,
             "sortable": false,
             "render": function (data, type, row, meta){
                if(type === "display"){
                   return '<img src="' + data + '">';
                } else {
                   return data;  
                }
             }
           }
       ]
   });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
  
</head>

<body>
  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Picture</th>
      </tr>
    </thead>
  </table>

</body>

</html>