1

I have Rails 4 application deployed on Digital Ocean. Everything went smoothly but the app returns 404 for images:

I, [2014-07-20T22:28:00.693171 #7751]  INFO -- : Started GET "/assets/left.png" for 128.73.51.11 at 2014-07-20 22:28:00 +0000
F, [2014-07-20T22:28:00.695271 #7751] FATAL -- : 
ActionController::RoutingError (No route matches [GET] "/assets/left.png"):
  vendor/bundle/ruby/2.0.0/gems/actionpack-4.1.0/lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'

After some googling I found this this and it is said that I can use either config.serve_static_assets = true or rake assets:precompile. I tried both but still have 404 for fonts and images (CSS and JS) are OK.

Can anyone help with this?

Community
  • 1
  • 1
franza
  • 2,297
  • 25
  • 39

1 Answers1

3

This might not solve your issue directly - it's more a clarification on what may be going wrong :)


Fingerprinting

Without knowing your app setup properly, this is just something to consider, but the main cause of this particular issue is the idea of asset fingerprinting

Fingerprinting is basically where Rails will take your asset files, compile them into single files (typically application.css / application.js), and allow you to reference those files as you wish.

The problem here is that if you're serving static assets, which have been fingerprinted, you won't be able to reference them as "static" assets from your CSS / JS any more. You'll have to use dynamic references:


Paths

Dynamic references are basically where you use something like asset_path - which allows you to reference the paths as you require regardless of their filename

Typically, you'll have CSS set up like this:

#app/stylesheets/application.css
body {
   background: url("your/image.png");
}

The problem here is that this will reference the image directly, and won't be able to use the dynamic fingerprinted path which is required. To fix this, you'll need to use one of the Rails CSS pre-processors (SASS & SCSS):

#app/assets/stylesheets/application.css.scss
body {
    background: asset_url("your/image.png"); /* Notice the path helper? */
}

The issue of dynamically referenced filenames / paths will be one of the issues you'll likely be facing with your application. Without seeing how you're referencing the images, I can only speculate - but I'd recommend taking a look at which path / asset helpers you're using

Richard Peck
  • 76,116
  • 9
  • 93
  • 147