Retrieving image to view ASP.NET MVC

Question

I have saved the attachment (image) to the database in my ASP.NET MVC application. Now I want to return the image in the view section. But seems like the retrieving image action want trigger as expected. Need some help from you all.

This is my view:

if (Model.PurchasingItemsList.Count != 0)
{
            <div>
                <table class="table">
                    <tr>
                        <th>
                            Supplier Name
                        </th>
                        <th>
                            Item Description
                        </th>
                        <th>
                            Unit Amount
                        </th>
                        <th>
                            Requesting Qty
                        </th>
                        <th>
                            Recommendation
                        </th>
                        <th>
                            Attachment
                        </th>
                        <th></th>
                    </tr>

                    @foreach (var item in Model.PurchasingItemsList)
                    {
                        <tr>
                            <td>
                                @Suppliers.Find(x => x.Value == item.Supp_Id.ToString()).Text
                            </td>
                            <td>
                                @itemsDetails.Find(x => x.Value == item.Itm_Description_Id.ToString()).Text
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Unit_Amount)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Qty)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Recommendation)
                            </td>
                            <td>
                                <img src="/Content/RetrieveImage/@item.Id" alt="" height=50 width=50 />
                            </td>
                        </tr>
                    }
                </table>
            </div>
        }

This is my controller view action and the image retrieving action.

public ActionResult View(int? id)
{
    List<M_Company> CompanyList = db.CreateCompany.Where(x => x.Status == true).ToList();
    List<SelectListItem> CompanyDropDown = CompanyList.Select(x => new SelectListItem { Text = x.CompanyName, Value = x.Id.ToString() }).ToList();

    List<M_Location> LocationList = db.Master_Locations.Where(x => x.Status == true).ToList();
    List<SelectListItem> LocationsDropd = LocationList.Select(x => new SelectListItem { Text = x.Location, Value = x.Id.ToString() }).ToList();

    List<M_Employee> EmpList = db.CreateEmployee.Where(x => x.Status == true).ToList();
    List<SelectListItem> EmpDropDown = EmpList.Select(x => new SelectListItem { Text = x.EmpName, Value = x.Id.ToString() }).ToList();

    List<M_Supplier> SupList = db.M_Supplier.Where(x => x.Status == true).ToList();
    List<SelectListItem> SupDropDown = SupList.Select(x => new SelectListItem { Text = x.SuppName, Value = x.Id.ToString() }).ToList();

    List<M_ItemsForQuotation> DescList = db.M_ItemsForQuotation.Where(x => x.status == true).ToList();
    List<SelectListItem> DescListDropDown = DescList.Select(x => new SelectListItem { Text = x.Itm_Desc, Value = x.Id.ToString() }).ToList();

    List<M_VehicleTypes> VehiTypList = db.Master_VehicleTypes.Where(v => v.Status == true).ToList();
    List<SelectListItem> VTypeDropDown = VehiTypList.Select(v => new SelectListItem { Text = v.VehiType, Value = v.Id.ToString() }).ToList();

    List<Request_Types> RequestTyleList = db.Request_Types.Where(r => r.Status == true).ToList();
    List<SelectListItem> ReqTypeDropDown = RequestTyleList.Select(r => new SelectListItem { Text = r.Request_Type, Value = r.Id.ToString() }).ToList();

    TempData["EmployeeList"] = EmpDropDown;
    TempData["SupplierList"] = SupDropDown;
    TempData["Itm_DesList"] = DescListDropDown;
    TempData["ComapnyList"] = CompanyDropDown;
    TempData["LocationList"] = LocationsDropd;
    TempData["VehiTypList"] = VTypeDropDown;
    TempData["RequestTyleList"] = ReqTypeDropDown;

    if (id == null)
    {
        return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
    }

    AppRequest appRequest = db.AppRequest.Find(id);

    if (appRequest.Purchase.Count != 0)
    {
        appRequest.PurchasingEmpList = appRequest.Purchase != null ? appRequest.Purchase.First().PurchasingEmpl.ToList() : null;
        appRequest.PurchasingItemsList = appRequest.Purchase != null ? appRequest.Purchase.First().PurchasingItems.ToList() : null;
    }
    else if (appRequest.General.Count != 0)
    {
        appRequest.GeneralItmsList = appRequest.General != null ? appRequest.General.First().GeneralItms.ToList() : null;
    }
    else if (appRequest.Suspense.Count != 0)
    {
        appRequest.SuspenseDetailsList = appRequest.Suspense != null ? appRequest.Suspense.First().SuspenseDetails.ToList() : null;
    }

    if (appRequest == null)
    {
        return HttpNotFound();
    }

    return View(appRequest);
}
   
public ActionResult RetrieveImage(int id)
{
    var q = from temp in db.PurchasingItems where temp.Id == id select temp.Attachment;
    byte[] cover = q.First();

    if (cover != null)
    {
        return File(cover, "image/jpg");
    }
    else
    {
        return null;
    }
}

When it comes to the view, Attachment field is nothing to show. And I put a break point to the action retrieving image, it won't get triggered. Can I get some help for this?

Answer 1

I think your HTML should be:

<img src="@Url.Action("RetrieveImage", new { id = item.Id })" />