CODEWITHSUNDEEP
javascripturlrelative-path
Lorenzo
Lorenzo

Reputation: 29427

relative path in javascript external file

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

alt text

If I do 

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

I get from fiddler

alt text

If I use 

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

I get from fiddler

alt text

My folder structure is as follow

alt text

the js file is in the js folder.

Upvotes: 0

Views: 8812

Answers (3)

Lorenzo
Lorenzo

Reputation: 29427

Finally I have found the soultion!

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

Upvotes: 0

Phil
Phil

Reputation: 165059

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 */
}

Upvotes: 2

Amir Raminfar
Amir Raminfar

Reputation: 34179

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/...

Upvotes: 2

Related Questions