CODEWITHSUNDEEP
cssruby-on-railsnginxasset-pipelinedigital-ocean
Eddie E Massey III
Eddie E Massey III

Reputation: 383

Rails Image Assets Not Loading

I've been dealing with the complications of the rails asset pipeline in production for about a week now. I'm finally almost done. I have two images that I'm referencing in a css file.

The css file is being precompiled and the precompiled images are referenced accordingly in the file. 

background:url(/assets/k-opacity-70-f75f0169dbfb178b3aedbf11429dfd68.png);

#intro{background:#111 url(/assets/intro-bg-12afabffede338ee9a72dbff2488bfea.jpg) no-repeat center;

I have edited my config/application.rb according to the suggestion on the Rails website to ensure I'm precompiling all the files I need.

 config.assets.precompile << Proc.new do |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path).to_path
    app_assets_path = Rails.root.join('app', 'assets').to_path
    if full_path.starts_with? app_assets_path
      puts "including asset: " + full_path
      true
    else
      puts "excluding asset: " + full_path
      false
    end
  else
    false
  end
end

Is there something I need to do besides making sure the assets are precompiled? My app is being deployed to a digital ocean server with nginx and passenger.

Upvotes: 0

Views: 2636

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

I think your problem is here:

background: url("<%= asset_path 'k-opacity-70.png' %>"); position: fixed; top: 0; left: 0; }

Helper

There is a helper called asset_url which is highly recommended for CSS. I would do this:

#app/assets/stylesheets/application.css.scss #-> notice the extension
background: asset_url("k-opacity-70.png");

This will make sure that your assets are referenced correctly, especially when you send them to your server. This may sound simplistic, but we've had issues in Heroku (I know you use DO) before, whereby the files didn't render, as their fingerprints were incorrect

May get downvoted for this (as it's basically the same as your code), but it's what works for us

Fingerprinting

Secondly, I would ensure your fingerprinted images are actually present in your public/assets folder

The precompliation process generally creates a series of images, stylesheets & js files which have to be referenced in your assets. This is handled with the helpers like the one I referenced above, but it also means they can be mis-referenced

--

If you have the correct files in your folders, the problem will be how you're referencing them, else it will be a problem with the precompilation process itself (which is in the remit of application.css)

Upvotes: 1

Related Questions