I have decided to host my own jQuery mobile files as the gem jquery_mobile_rails only includes version 1.3.0 while I want to ensure I always have the latest version of jQM. This proved surprisingly easy as i just added the js file under javascripts and the css under stylesheets in my assets folder.
I copied the icon buttons to both /assets/images and to /assets/stylesheets/images. They are displayed properly in development but not in production. My console is showing the images being precompiled.
I have the following in production.rb
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif application-print.css)
Whereas Rails 3.2 would generate both a fingerprinted (picture-df71a1234da231a124a.png) and non-fingerprinted (picture.png) asset during precompilation, Rails 4 no longer generates non-fingerprinted versions.
Most likely, the CSS file from jQuery Mobile contains references such as this:
background-image: url(images/icons-18-white.png)
The problem being that the CSS file has no clue what the fingerprint should be. The best solution would be to use Rails' asset path helpers. First, make sure the file is an SCSS file (just rename it so it's something like jquery.mobile-1.3.1.css.scss). This will tell rails to compile it using Sass.
Next, change all of the url(...) entries in the css file to image-url(...). Make sure to add quotes around the path. For example, this would load the file at app/assets/images/images/icons-18-white.png (which becomes public/assets/images/icons-18-white.png in production).
background-image: image-url("images/icons-18-white.png")
Upon deploying these changes, the jQuery mobile css file should get precompiled and the resulting file should include the proper fingerprinted URLs.
