I am trying to display an image from a table cell unto my view page using javascript but the button is not working. Here is the code:
<script>
function displayImage() {
var table = document.getElementById("Table1");
const base64String = table.rows[0].cells[4].innerText;
// Add the necessary data URI prefix (MIME type + base64)
// Assuming the image is a JPEG. Change 'jpeg' to 'png', 'gif', etc. if needed
const dataUri = "data:image/png;base64," + base64String.trim();
// Get the image display element and set its source
const displayImageElement = document.getElementById("displayArea");
displayImageElement.src = dataUri;
return false;
}
</script>
Here is the view page with the table:
<form asp-controller="WorkerIdentifications" asp-action="Index" method="post">
<p>
<input type="submit" value="View Image" name="identify" onclick="return displayImage()" class="btn btn-primary" />
</p>
</form>
<h4>Displayed Image:</h4>
<div id="imageContainer">
<img id="displayArea" src="" alt="" width="150">
</div>
<table class="table" id="Table1" >
<thead>
<tr>
<th>
Check
</th>
<th>
@Html.DisplayNameFor(model => model.WorkerIdNo)
</th>
<th>
@Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.WorkerImage)
</th>
<th>
@Html.DisplayNameFor(model => model.CompnyCode)
</th>
<th>
@Html.DisplayNameFor(model => model.DeptmentCode)
</th>
<th>
@Html.DisplayNameFor(model => model.IdentificationKey)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Check</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.WorkerIdNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.WorkerImage)
</td>
<td>
@Html.DisplayFor(modelItem => item.CompnyCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.DeptmentCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.IdentificationKey)
</td>
</tr>
}
</tbody>
</table>
