jstree and Rails asset pipeline

Question

I am using the jstree ( https://www.jstree.com/ ) jQuery library. Works fine in development but in production all the standard background CSS breaks. The css calls the background icons from /app-assets/32px.png etc. These files are in my /app/assets/images and even added them to my pre-compile but none of them load (throw 404 errors).

I suspect the issue is that I deploy to production Rails is pre-compiling the images and when the jstree css calls url("32px.png") the server calls /app-assets/32px.png which will always fail because the server is expecting the /app-assets/32px-xxxxxxxxxxxxxxxx.png precompiled asset pipeline url.

I can manually dump the icon files in the public folder and hack the css but the JS seem to still trigger code for the old path. Can I get JS tree to reference the Rails asset pipeline urls?

Answer 1

The ended up being the CSS which calls for the background to be url("32px.png") and in the Rails world that is relative to the pre-compiled CSS that is under /assets/...

I placed my jstree images in the static /public folder and then changed the CSS to url("/32px.png") so that jstree loads them absolute from root.

There is an option to use image-url("32px.png") but the jstree JS fails when it tried to load the images as it tries to still load the relative path and I saw some double loading of the image files etc. I gave up on that and opted for the first solution.

Hope this helps someone down the road.