retrieve image using image path saved in the database c#

Question

I need to do something like this.

I tried using switch statement and this is the result

Now I tried a different approach. I saved the file path of the image in the database. Then retrieve the file path from the database so that it will display the corresponding image and this is the result

instead of displaying the image it displayed the image path from the database. How can I resolve this?

Here's my code:

_DeliveryDetailsPartial

    <h5 style="text-transform:uppercase; padding-left:5px; margin-top:10px; font-weight:bold">Payments Accepted</h5>
    @foreach (StoreAcceptedPayment payment in Model.Item4)
    {
        <span class="col-md-3">@Html.DisplayFor(model => payment.ImgPath)</span>
    }

DeliverController

public ActionResult GetStoreDetails(string id)
    {
        var store = new Tuple<List<Store>, List<StoreHour>, List<StoreHour>, List<StoreAcceptedPayment>>
        (_repo.GetStore(int.Parse(id)), _repo.GetStoreHourByDay(dayOftheWeek), _repo.GetStoreHourByID(int.Parse(id)), _repo.GetAcceptedPayment(int.Parse(id)));

        return View(store);
    }

Thanks in advance..

Answer 1

Please do like below.

<span class="col-md-3">@Html.DisplayFor(model => payment.ImgPath)</span>

Instead of the above code please use the below one.

<span class="col-md-3">
    <img src="~/Images/@payment.ImgPath" alt=""  />
</span>

Answer 2

If you have only filename in Model then you have to do this way using img tag utilizing its src attribute:

@foreach (StoreAcceptedPayment payment in Model.Item4)
{
   <img src="@Url.Content("~/"+payment.ImgPath)" />
}