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?