MVC broken image path

Question

I am using jQuery DatePicker plugin in my MVC application. To display a certain image for Calendar pop-up I am using the following lines

 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: "../images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});

In my Views I always define my form as follows:

 @using (Html.BeginForm("Insert", "MyController", FormMethod.Post, new { id = "insertForm", onsubmit = "return confirm('Do you confirm insert operation?')" }))

when I run a certain page without any parameters, such as

http://localhost:52849/MyController/Insert

everything is OK and image of the calendar is shown properly. Also when I inspect the element with Firebug I see the following declaration:

<img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/>

and if I copy the Image URL in Chrome I get

http://localhost:52849/images/Calendar.png

But when I call the page with a parameter as

http://localhost:52849/MyController/Insert/6

The image dissappears. when I inspect the button with firebug I still see the same declaration as

<img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/>

but when I get the Image Url with Chrome I get

http://localhost:52849/MyController/images/Calendar.png

what is the reason behind it and how can I possibly solve this problem without passing the parameter(s) with query strings or Session variables

Answer 1

That's happening because you're using a relative path for the buttonImage property.

Instead, use an absolute path and the problem will be solved.

eg:

 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: "/myapplication/images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});

(In practice, I usually have a javascript variable defined which contains the application root and then combine that with the path to a resource: that way if the application has to be deployed to a different path, all the images don't break.)

eg:

 var appRoot = '<%=Request.ApplicationPath%>';
 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: appRoot + "/images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});