display Image by the path stored in a sql server database

Question

I am creating an asp.net MVC 4 application and I am trying to display images that I have uploaded to a folder. I have saved the path to a sql server database and each uploaded image has there own unique ID. I am able to display the Id and path in a table but I also wish to be able to view the image.

This is what it displays : http://imgur.com/a/pPTvG

Thanks for any help with this issue

Model

public partial class Image
{
    [Key]
    public int ID { get; set; }
    public string ImagePath { get; set; }
}

Controller

  public class HomeController : Controller
    {
        private IImageRepository repository;
        public HomeController(IImageRepository imageRepository)
        {
            //this.repository = imageRepository;
            repository = imageRepository;
        }

        public ViewResult GetImage(int ID)
    {
        Image Images = repository.Images
        .FirstOrDefault(x => x.ID == ID);
        return View(Images);

    }
    }

View

    @model IEnumerable<MyProject.Models.Image>
@{
    ViewBag.Title = "Index";
}

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            <h5><b>Image</b></h5>
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Heading)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ImagePath)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td class="text-right">@item.ID</td>
            <td>
                <img class="img-thumbnail" width="150" height="150" src="@Url.Action("GetImage", "Home",new { item.ID })" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Heading)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ImagePath)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @*@Ajax.ActionLink("Delete", "Delete", new { id = item.ID })*@

                @Ajax.ActionLink("Delete",
                  "Delete",
                new { id = item.ID },
                new AjaxOptions
                {
                    UpdateTargetId = (string)item.ImagePath,
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET"
                })
            </td>
        </tr>
    }

</table>

Answer 1

Your image source is wrong:

<img class="img-thumbnail" width="150" height="150" src="@Url.Action("GetImage", "Home",new { item.ID })" />

it points to Home/Getimage/id . you need to set path of image:

if you already have imagePath in you model just bind it to image source:

<img class="img-thumbnail" width="150" height="150" src="@item.ImagePath" />

Answer 2

尝试这个：

 <img class="img-thumbnail" width="150" height="150" src="/folderpath/@item.ImagePath" />