Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How define the img src path in MVC

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");
        }
);
like image 484
Juan Carlos Oropeza Avatar asked Mar 20 '15 18:03

Juan Carlos Oropeza


People also ask

What specifies the path to the image?

The <img> tag has two required attributes: src - Specifies the path to the image.

What is src in path?

The 'src' attribute in a tag is the path to an external file or resource that you want to link to your HTML document.


1 Answers

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")');
like image 129
mfanto Avatar answered Nov 15 '22 05:11

mfanto