CODEWITHSUNDEEP
jquerycssasp.net-mvcimagesrc
user3021830
user3021830

Reputation: 2924

MVC broken image path

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

Upvotes: 0

Views: 1482

Answers (1)

Nathan
Nathan

Reputation: 6216

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"
});

Upvotes: 1

Related Questions