Question

I am trying to display an image on my home page. MY Index.cshtml code looks as follows:

@{
ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

<h4>View results by:</h4>
<ul id="friend">
<li>@Html.ActionLink("Countries", "Countries", "Home")</li>
<li>@Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
<img id="banner" src="oly1.jpg"/>
</div>

For some reason, though, the image does not show on my page. I have the image saved to my desktop, and when I did the same thing for another project (using an image saved to the desktop), it worked with the same syntax. I was using pure html, though.

Any ideas?

Answer 1

Try this:

@{
ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

<h4>View results by:</h4>
<ul id="friend">
<li>@Html.ActionLink("Countries", "Countries", "Home")</li>
<li>@Html.ActionLink("Events", "Events", "Home")</li>
</ul>
<div>
    <img id="banner" src="@Url.Content("~/oly1.jpg")"/>
</div>

~ refers to the root of your web site. If you have your image file at the root, then use the above path. If your image is inside Content/images, use ~/Content/images/oly1.jpg.

Example: