Loading Images from Javascript on the Front End

Question

I'm getting some 404 errors on image paths in this plugin I'm building.

I'm trying to build a plugin that has some Javascript and images (like a close icon and a progress bar) that I want to load on the frontend. I found the proper technique to enqueue jQuery, and then the proper technique to register and enqueue my jQuery script I made. The only trouble is that the jQuery needs to load an image like a close icon and a progress bar. I am told that I can't rely on relative paths in various blog situations, and also put the image in the same directory as the script. Everything fails to load those images -- I get 404s because WordPress gets the paths wrong.

Sure, I can specify something like...

jQuery('#test').css('background','transparent url(wp-content/plugins/myplugin/closer.png) 0 0 no-repeat');

...but the wp-content/plugins/myplugin/closer.png path is unreliable in some ways that people setup their blogs.

What's the technique to get my front-end jQuery component to load these images without 404 errors and without hard-coding a path? I mean, does WordPress automatically inject some kind of path global constant in jQuery that I can pick up and use?

Answer 1

The answer is to use wp_register_style() and wp_enqueue_style() before I do wp_register_script() and wp_enqueue_script() so that I can use relative image paths to the CSS file. I then move the url() stuff from jQuery and into the CSS file with this relative path.