jquery - MVC 损坏的图像路径

Question

我在我的 MVC 应用程序中使用 jQuery DatePicker 插件。要为日历弹出窗口显示特定图像，我使用以下行

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

在我的 View 中，我总是按如下方式定义我的表单:

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

当我不带任何参数运行某个页面时，比如

http://localhost:52849/MyController/Insert

一切正常，日历图像正确显示。此外，当我使用 Firebug 检查元素时，我看到以下声明:

<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

图像消失了。当我用 Firebug 检查按钮时，我仍然看到与

相同的声明

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

但是当我使用 Chrome 获取图像 Url 时，我得到了

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

这背后的原因是什么？我怎样才能在不通过查询字符串或 session 变量传递参数的情况下解决这个问题

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