title: MVC broken image path
body: <p>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</p>
  
  <pre><code> $.datepicker.setDefaults({
      showOn: "both",
      buttonImage: "../images/Calendar.png",
      buttonImageOnly: true,
      buttonText: "show calendar"
  });
  </code></pre>
  
  <p>In my Views I always define my form as follows:</p>
  
  <pre><code> @using (Html.BeginForm("Insert", "MyController", FormMethod.Post, new { id = "insertForm", onsubmit = "return confirm('Do you confirm insert operation?')" }))
  </code></pre>
  
  <p>when I run a certain page without any parameters, such as </p>
  
  <pre><code>http://localhost:52849/MyController/Insert
  </code></pre>
  
  <p>everything is OK and image of the calendar is shown properly. Also when I inspect the element with Firebug I see the following declaration:</p>
  
  <pre><code>&lt;img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/&gt;
  </code></pre>
  
  <p>and if I copy the Image URL in Chrome I get </p>
  
  <pre><code>http://localhost:52849/images/Calendar.png
  </code></pre>
  
  <p>But when I call the page with a parameter as</p>
  
  <pre><code>http://localhost:52849/MyController/Insert/6
  </code></pre>
  
  <p>The image dissappears. when I inspect the button with firebug I still see the same declaration as</p>
  
  <pre><code>&lt;img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/&gt;
  </code></pre>
  
  <p>but when I get the Image Url with Chrome I get</p>
  
  <pre><code>http://localhost:52849/MyController/images/Calendar.png
  </code></pre>
  
  <p>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</p>