How to use static Resource images in static Resource javascript

Question

How to use static Resource images in static Resource java script,

 <img class="canceluploadicon" src="EasyResources.zip/images/closeIcon.png" alt="cancel" width="30"></a></div>');
  //$j('#progressBox').append('<input type="text" value="" ><div id="fileSize">Size: '+size+' KB</div></div><br/><br/>'); 

at src how can i call static Resource image

Answer 1

You can create a JavaScript global in your Visualforce (where URLFOR etc works):

<script>
var closeIconUrl = "{!URLFOR($Resource.EasyResources, 'images/closeIcon.png')}";
</script>

and then use jQuery in some later JavaScript that is included in the page from a static resource to set that value as the image src:

$j('img.canceluploadicon').attr('src', closeIconUrl);

A related technique, not requiring a change in the Visualforce, is to hard code the URL format that is output by URLFOR and use the current time to ensure that the latest version of the static resource is used (though this will likely stop that resource being cached by the browser);

$j('img.canceluploadicon').attr(
        'src',
        '/resource/' + Date.now() + '/EasyResources/images/closeIcon.png'
        );