I am trying to fetch the image from database but it showing no image (alt message) in the place of image.

Here is my image columnname, datatype and DataStoreValue

ColumnName : DesignImage
DataType : Image
DataStoreValue : Binary data [after applying query i.e. select * from abc I get output of image : 0xFFD8FFE000104A46494600010101006000600000FFDB004300080606070605080707070909080A0C1….]

Now, when I applying ajax and fetch image and show in datatable it does’nt show image. Here is my aspx code,

function format(d) {
    // `d` is the original data object for the row
    let greeting = '<dl>';  
    if (d.DesignImage !== null) {
        const imgTag = '<img src="data:image/png;base64," ' + d.DesignImage +' alt = "No Image" style = "width: 50px; height: 50px;" > ';
        greeting += '<dt><u>Image</u> : ' + imgTag + ' </dt>n ';
    }
    greeting += '</dl>';
    return greeting;            
}

$("#btnSubmit").click(function (e) {                
    $.ajax({
        type: "POST",
        url: "FillGridMethod.asmx/StockList",    
        dataType: "json",
        success: function (data) {                    
            var datatableVariable = $('#gv_Datatable').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'pdf', 'print', 'excel'
                ],                        
                "bDestroy": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                data: data,
                columns: [
                    {
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    { 'data': 'Product' },                
            });                            
            // Add event listener for opening and closing details
            datatableVariable.on('click', 'td.dt-control', function (e) {
                let tr = e.target.closest('tr');
                let row = datatableVariable.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                }
            });                    
        }
    });
});

Here is my asmx code

[WebMethod(enableSession: true)]
public void StockList()
{
    var stock = new List<StockModel>();
    string constr = cn.ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        qryFillGrid = "select TagItem, CAST(STCK.DesignImage AS VARBINARY(MAX)) as DesignImage from tbl_StockRunning STCK " + System.Environment.NewLine;       
        var cmd = new SqlCommand(qryFillGrid, con);
        con.Open();
        var dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            var stockModel = new StockModel
            {
                Product = dr[0].ToString(),
                DesignImage = dr[1].ToString()
            };
            stock.Add(stockModel);
        }
    }
    var js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(stock));
}

Here is my model .cs file

public class StockModel
{
    public string Product { get; set; }
    public string DesignImage { get; set; }
}

Any guess…what’s issue?