如果 .datePicker 中的 buttonImage 以正斜杠 (/) 开头，Chrome 找不到图像

Question

我有一些日期选择器，其图像设置在 jquery.

的 .js 文件中

可以像我在 buttonImage 中所做的那样删除前导 / 吗？下面的 jsFiddle 表明 Chrome 应该能够处理这个所以我想知道我是否做错了什么。

在 .datePicker() 中设置 buttonImage 时，如果位置以“/”开头，Chrome 找不到图像（Chrome DevTools 中幕后的 404）。这些是下面有问题的 .datePicker() 中的行：

buttonImage: "content/images/cal.png", //适用于所有浏览器
buttonImage: "/content/images/cal_editor.jpg", //不在
工作 CHROME 但适用于 IE、Firefox

但是，当我尝试在一个简单的 jsFiddle 中复制它时，如果没有正斜杠，它在 Chrome 中不起作用：http://jsfiddle.net/tonyleif/3z865d2r/2/.

来自上面的jsFiddle：

buttonImage: "/img/initializing.png" //适用于所有浏览器
buttonImage: "img/initializing.png" //不适用于所有浏览器

这是在我的应用程序中调用的完整 .datePicker 函数：

var $calendarButton = $(me).datepicker({
    dateFormat: "dd-M-yy",
    showOn: "button",
    buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS
    //buttonImage: "/content/images/cal.png", //NOT WORKING IN CHROME but works in IE, Firefox
    buttonImageOnly: true,
    beforeShowDay: oneDayOnlyMethod,
    altField: alternateField,
    onSelect: function() {
        if ($(me).hasClass('searchItem')) {
            APP.SearchTable.AddDateFilter($(me));
        }
        var pairedName = $(me).attr('paired-date-picker');
        if (pairedName !== undefined && pairedName.length > 0) {
            var d = $(this).val();
            if (isValidDate(d.valueOf())) {
                var pairedControl = $('#' + pairedName);
                if (pairedControl.val() == "" || pairedControl.val() == "DD-MMM-YY") {
                    pairedControl.val(d);
                }
            }
        }
        $(me).change();
    }
}).next(".ui-datepicker-trigger").addClass("calendar-button");

如果您需要更多代码，请告诉我。我一开始尽量不包含太多文字。

我还应该注意的一件事是，当我在运行本地站点 Visual Studio 2013 时，我没有遇到这个问题。只有当我发布到服务器时才会发生。

Answer 1

前导斜线背后的想法是，它使整个 URL 相对于站点的根目录 (http://sitename.blah/)。如果没有斜杠，您将获得查找来源的相对路径。

我的猜测是您试图从根目录以外的目录获取图像，这就是为什么它在所有浏览器上都没有斜线的原因。

将您的代码与 jsFiddle 进行比较没问题，但您还需要比较文件路径以及它们相对于站点根目录的位置。在 jsFiddle 中，img 文件夹位于站点的根目录。

所以回答你的问题，不，除非你想从相对目录中获取文件，否则不可以省略斜线。

如果 .datePicker 中的 buttonImage 以正斜杠 (/) 开头，Chrome 找不到图像

If buttonImage in .datePicker starts with a forward slash (/), Chrome does not find the image

google-chrome

input-button-image

jquery-ui-datepicker