Image stored in binary form in Database.
I’m displaying image in html img tag in default page image working but in Jquery datatable not working.
@inject ImageService imageService
@model List<Product>
<div class="container">
<div class="row pt-4 pb-3">
<div class="col-6">
<h2 class="text-primary">Product Details</h2>
</div>
<div class="col-6 text-end">
<a asp-controller="Product" asp-action="Create" class="btn btn-primary">Create Product</a>
</div>
</div>
<table id="tblData" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Company</th>
<th>image</th>
<th></th>
</tr>
</thead>
</table>
</div>
@section Scripts{
<script src="~/js/product.js"></script>
<script>
var dataTable;
$(document).ready(function () {
$('#tblData').DataTable({
"ajax": { url: '/admin/product/getall' },
"columns": [
{ data: 'productName', "width": "25%" },
{ data: 'productDescription', "width": "15%" },
{ data: 'price', "width": "10%" },
{ data: 'companyDetails.name', "width": "15%" },
//{ data: 'imageData', "width": "10%" },
{
targets: 2,
data: 'imageData',
"render": function (data, type, row, meta) {
return <img src="@imageService.DecodeImage`(`${data}`,`${row.contentType}`)"/>
},
"width": "15%"
},
{
data: 'id',
"render": function (data) {
return `<div class="w-75 btn-group" role="group">
<a href="/admin/product/edit?id=${data}" class="btn btn-primary mx-2"> <i class="bi bi-pencil-square"></i> Edit</a>
<a onClick=Delete('/admin/product/delete/${data}') class="btn btn-danger mx-2"> <i class="bi bi-trash-fill"></i> Delete</a>
</div>`
},
"width": "15%"
}
]
});
});
</script>
}
By c# decode service Im decoding image. This service is created by me. This Function work out side javascript but not work inside.
working code without javascript
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center">
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Company</th>
<th>Image</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var obj in Model)
{
<tr>
<td>
@obj.ProductName
</td>
<td>
@obj.ProductDescription
</td>
<td>
@obj.Price
</td>
<td>
@obj.CompanyDetails.Name
</td>
<td>
<img src="@imageService.DecodeImage(obj.ImageData,obj.ContentType)"/>
</td>
<td class="text-end">
<div class="w-75 btn-group"></div>
<a class="btn btn-primary" asp-controller="Product" asp-action="Edit" asp-route-id="@obj.Id">
<i class="bi bi-pencil-square"></i>Edit
</a>
</td>
<td class="text-end">
<div class="w-75 btn-group"></div>
<a class="btn btn-danger justify-content-end" asp-controller="Product" asp-action="Delete" asp-route-id="@obj.Id">
<i class="bi bi-trash"></i>Delete
</a>
</td>
</tr>
}
</tbody>
</table>
Help please
<script>
var dataTable;
$(document).ready(function () {
$('#tblData').DataTable({
"ajax": { url: '/admin/product/getall' },
"columns": [
{ data: 'productName', "width": "25%" },
{ data: 'productDescription', "width": "15%" },
{ data: 'price', "width": "10%" },
{ data: 'companyDetails.name', "width": "15%" },
{
targets: 2,
data: 'imageData',
"render": function (data, type, row, meta) {
return <img src="@imageService.DecodeImage`(`${data}`,`${row.contentType}`)"/>
},
"width": "15%"
},
{
data: 'id',
"render": function (data) {
return `<div class="w-75 btn-group" role="group">
<a href="/admin/product/edit?id=${data}" class="btn btn-primary mx-2"> <i class="bi bi-pencil-square"></i> Edit</a>
<a onClick=Delete('/admin/product/delete/${data}') class="btn btn-danger mx-2"> <i class="bi bi-trash-fill"></i> Delete</a>
</div>`
},
"width": "15%"
}
]
});
});
</script>