MVC破碎的圖像路徑

Question

我在我的MVC應用程序中使用jQuery DatePicker插件。要顯示日曆彈出一個特定的形象，我使用下面的行

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

在我的看法，我總是定義我的格式如下：

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

當我運行的某一頁不帶任何參數，如

http://localhost:52849/MyController/Insert 

一切正常，日曆圖像顯示正常。此外，當我檢查元素與螢火蟲我看到了如下聲明：

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

，如果我在Chrome中複製圖片URL，我得到

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

但是當我打電話的頁面與參數作爲

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

圖像消失。當我檢查按鈕與螢火蟲我仍看到相同的聲明爲

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

，但是當我拿到這張圖片的網址與瀏覽器，我得到

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

背後是什麼原因，我怎麼可能解決此問題而不傳遞查詢字符串或會話變量的參數

Answer 1

發生這種情況是因爲您正在使用buttonImage屬性的相對路徑。

相反，使用絕對路徑，問題將得到解決。

例如：

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

（在實踐中，我通常定義一個JavaScript變量，它包含應用程序根，然後結合起來，與路徑的資源：這樣，如果應用程序具有被部署到不同的路徑，所有的圖像不休息）

如：

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