Problem When Loading Base65 Image From Table Field - image

Question

Using the following code I am trying to resize a image and to save it into a table into a VARBINARY(MAX) type field.
When I try to display the saved image, I get nothing on my screen...
When I try to decode manually the saved image using an online decoder, I get the following error :
"The MIME of file was detected as “application/octet-stream”, but the decoder displays it as “image/octet-stream”"
Please help me to save the image into table !
Thank you very much !
The sample below is based on :
https://www.prowaretech.com/Computer/Blazor/Examples/WebApi/UploadImages
and the online Base64 decoder I used is :
https://base64.guru/converter/decode/image
This is the code I am using :
#page "/TestBase64"
#using ResizeUploadImages.Shared
#using System.IO
#using System.Text;
#using System.Threading;
#using System.Threading.Tasks;
#using Microsoft.AspNetCore;
#inject HttpClient Http
#inject IJSRuntime JsRuntime
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>
#foreach (var item in filesBase64_V1)
{
<tr>
<td style="text-align: center">
<h6> File Name : </h6>
<h6> "#item.fileName" </h6>
</td>
</tr>
<tr>
<td style="text-align: center">
<img src="data:#item.contentType;base64,#item.base64data" />
</td>
</tr>
}
</td>
</tr>
<tr>
<td>
<div class="custom-file" id="img_V1_div">
<InputFile id="inputFile_V1" class="custom-file-input" multiple="false" OnChange="OnChange" accept="image/png, image/jpeg, image/gif, image/bmp" />
<label class="custom-file-label" for="inputFile_V1">Choose file</label>
</div>
</td>
</tr>
</table>
#code {
List<ImageFile>
filesBase64_V1 = new List<ImageFile>();
async Task OnChange(InputFileChangeEventArgs e)
{
filesBase64_V1 = new List<ImageFile>(); // clear the list of files
var files = e.GetMultipleFiles(); // get the files selected by the users
foreach (var file in files)
{
var preview_file = await file.RequestImageFileAsync(file.ContentType, 250, 250); // resize the image file
var buffer_preview_file = new byte[preview_file.Size]; // allocate a buffer to fill with the file's data
using (var stream = preview_file.OpenReadStream())
{
await stream.ReadAsync(buffer_preview_file); // copy the stream to the buffer
}
filesBase64_V1.Add(new ImageFile { FileData=buffer_preview_file, base64data = Convert.ToBase64String(buffer_preview_file), contentType = file.ContentType, fileName = file.Name, IMAGE_IS_DISPLAYED = false }); // convert to a base64 string!!
await JsRuntime.InvokeVoidAsync("alert", $"{buffer_preview_file}");
//I am saving the two variables
// buffer_preview_file
// and
// base64data
// into a table into two VARBINARY(MAX) fields
// Each time when I try to load images from that table, I get nothing
// on my page
}
}
}