I am trying to make this picture showing but I had no success.

If I do

$.blockUI.defaults.message = '<img src="../images/blockUI_Loader.gif" />';

I get from fiddler

If I do

$.blockUI.defaults.message = '<img src="../_assets/images/blockUI_Loader.gif" />';

I get from fiddler

If I use

$.blockUI.defaults.message = '<img src="~/_assets/images/blockUI_Loader.gif" />';

I get from fiddler

My folder structure is as follow

the js file is in the js folder.

I am trying to make this picture showing but I had no success.

If I do

$.blockUI.defaults.message = '<img src="../images/blockUI_Loader.gif" />';

I get from fiddler

If I do

$.blockUI.defaults.message = '<img src="../_assets/images/blockUI_Loader.gif" />';

I get from fiddler

If I use

$.blockUI.defaults.message = '<img src="~/_assets/images/blockUI_Loader.gif" />';

I get from fiddler

My folder structure is as follow

the js file is in the js folder.

• javascript
• url
• relative-path

• Travis unfortunately did not accepted to be wrong...It deleted his answer and then came here to downvote...oh Travis Travis... – Lorenzo Commented Nov 12, 2010 at 1:38

3 Answers 3

An alternative solution is to apply classes to your elements via JavaScript and set a background image using CSS.

Relative url paths in CSS are always relative to the stylesheet file which can make them easier to keep consistent.

For example

Javascript

$.blockUI.defaults.message = '<div class="blockUI-Loader"></div>';

CSS

.blockUI-Loader {
    /* url path is relative to this CSS file in "_assets/css" */
    background-image: url(../images/blockUI_Loader.gif);
    background-repeat: no-repeat;
    width: nnpx; /* width of image */
    height: nnpx; /* height of image */
}

The relative path is relative to the HTML file and not the js file. So looking above at your other files, I am guessing you need to images/...

Finally I have found the soultion!

$.blockUI.defaults.message = '<img src="_assets/images/blockUI_Loader.gif" />';