CODEWITHSUNDEEP
c#asp.netasp.net-mvc
user3127986
user3127986

Reputation: 388

image is not showing up

I will like to know why my image is not displaying. I have store the address of the image in a column name ImageArticle. I am trying to get this image displayed after all my field in a MVC project. Here is the code.

Index.cshtml

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Phone)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            <img src="@Html.DisplayFor(modelItem => item.ImageArticle)" />  <== here is the image
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

Here is the definition I put in the DB field ImageArticle: ~/Images/phone.jpg

Here is the HTML created when I ran the apps

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
<p>
    <a href="/Home/Create">Create New</a>
</p>
<table class="table">
    <tr>
        <th>
            FirstName
        </th>
        <th>
            LastName
        </th>
        <th>
            Phone
        </th>
        <th>
            Email
        </th>
        <th>
            ImageArticle
        </th>

        <th></th>
    </tr>

    <tr>
        <td>
            Joe
        </td>
        <td>
            Bloe
        </td>
        <td>
            222-222-3344
        </td>
        <td>
            [email protected]
        </td>
        <td>
            <img src="~/Images/phone.jpg"  />   <== this image should show up correctly?
        </td>
        <td>
            <a href="/Home/Edit/1">Edit</a> |
            <a href="/Home/Details/1">Details</a> |
            <a href="/Home/Delete/1">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            Paul
        </td>
        <td>
            Statsny
        </td>
        <td>
            333-444-5544
        </td>
        <td>
            [email protected]
        </td>
        <td>
            <img src="dshfs"  />
        </td>
        <td>
            <a href="/Home/Edit/2">Edit</a> |
            <a href="/Home/Details/2">Details</a> |
            <a href="/Home/Delete/2">Delete</a>
        </td>
    </tr>

</table>

In the VS solution Explorer, I created a folder called Images where I put the phone.jpg.

But the picture is not showing up on the screen.

Thanks

Upvotes: 0

Views: 88

Answers (2)

Rakhita Wickramatunge
Rakhita Wickramatunge

Reputation: 4503

You can create a custom tag for the Image control instead of Html.DisplayFor. Detail explanation can be found here.

Upvotes: 0

stead
stead

Reputation: 167

You can wrap your image url in a @Url.Content.

<img src="@Url.Content(item.ImageArticle)" />

Upvotes: 2

Related Questions