How to display image in list in MVC? - arrays

Question

I'm a final year student, working on FYP, I have an issue about fetching image that is stored in binary data in database. I tried lots of solutions, I've searched on Google, but not working any solution.
View
#model IEnumerable<PictureServices.Picture>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
<tr>
#foreach (var item in Model)
{
<td>
#{
var base64 = Convert.ToBase64String(item.image);
var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
}
<img src='#imgsrc' style="max-width:100px; max-height:100px;">
</td>
model
public class Picture
{
public int id { get; set; }
public byte[] image { get; set; }
public string name { get; set; }
}
controller
public class CarServicesController : Controller
{
TestingEntities db = new TestingEntities();
public ActionResult Index()
{
Picture ds = new Picture();
var item = (from d in db.Pictures
select d).ToList();
return View(item);
}

Answer 1

You can convert the byte array to base 64 string and use that as the image source. You can use the Convert.ToBase64String to do so. One thing you must do is a null check before trying to convert the byte array as that could be null.
#model IEnumerable<PictureServices.Picture>
<table class="table table-striped">
#foreach (var r in Model)
{
<tr>
<td>#r.Id</td>
<td>#r.Name</td>
<td>
#if (r.Image != null)
{
var imgSrc = $"data:image/jpg;base64,{Convert.ToBase64String(r.Image)}";
<img src="#imgSrc" alt="#r.Name" />
}
</td>
</tr>
}
</table>
I would also recommend using PascalCasing for C# class properties ( Name instead of name).