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

Question

I have datepickers whose images are being set in a .js file with jquery.

Is it ok to remove the leading / as I have done in buttonImage? The jsFiddle below suggests that Chrome should be able to handle this so I'm wondering if I'm doing something else wrong.

When setting buttonImage in .datePicker(), if the location starts with "/", Chrome doesn't find the image (404 behind the scenes in Chrome DevTools). These are the lines from the .datePicker() below in question:

• buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS

• buttonImage: "/content/images/cal_editor.jpg", //NOT WORKING IN
  CHROME but works in IE, Firefox

However, when I try to replicate this in a simple jsFiddle, it doesn't work in Chrome without the forward slash: http://jsfiddle.net/tonyleif/3z865d2r/2/.

From the jsFiddle above:

• buttonImage: "/img/initializing.png" //WORKING IN ALL BROWSERS

• buttonImage: "img/initializing.png" //NOT WORKING IN ALL BROWSERS

Here is the full .datePicker function that is being called in my app:

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

Let me know if you need more code that this. I'm trying not to include too much text initially.

One more thing I should note is that when I'm running the site locally with Visual Studio 2013, I don't have this issue. It only happens when I publish to the server.

Answer 1

The idea behind the leading slash is that it makes the whole URL relative to the root of the site (http://sitename.blah/). Without the slash, you get the relative path of where the lookup originated.

My guess is that you're attempting to get the image from a directory other than the root, which is why it works without the slash on all browsers.

Comparing your code to the jsFiddle is fine, but you need to also compare the file paths and where they are relative to the site root. In jsFiddle, the img folder is at the root of the site.

So to answer your question, no, it's not ok to leave off the slash unless you mean to get the file from the relative directory.