How define the img src path in MVC

Question

I have my index.cshtml with a image

< img id="u3430_img" src="Images/send.png">

And a folder Images inside myApp/Images folder

if i access

• http:/localhost/myApp OR
• http:/localhost/myApp/home/

works Ok. But if i use

• http:/localhost/myApp/home/index

The page try to look for the image in

• http:/localhost/myApp/home/Images/send.png

So how I should define my src.

Aditional note: Beside the index.cshtml I also have an js file where a hover effect is add it to the image. And have same problem neither of those option work

$('#u3430_img').hover(
        function () {                
            $(this).attr("src", "~/Images/send_hover.png");
        },
        function () {                
            $(this).attr("src", "Images/send.png");
        }
);

Answer 1

You can reference images in the top level of the project with the ~.

<img src="~/Images/send.png">

Older versions of ASP.NET MVC needed a @Url.Content() around the path, as described here

Edit: If you want to update the path from Javascript, you can either specify an absolute path, or wrap it in @Url.Content().

$('#image').attr('src', '/Images/send.jpg');

$('#image').attr('src', '@Url.Content("~/Images/send.png")');