Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rails4: image_url not generating digest in scss

I can't understand why my css file is not appending digests to my assets with the helper method image_url

My assets are correctly precomiled, and files do contain the digest. I also can access them (with the digested url) manually. And most strange thing is that in the beginning it was working.

here's my configs:

  config.assets.js_compressor = :uglifier
  config.assets.compile = false
  config.assets.digest = true
  config.assets.version = '1.0'
  config.serve_static_assets = false #also tried true

here's my application.css: *= require_tree .

here's the common.scss file, used for including an image:

body{
    background: image_url('bg.jpg');
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
}

The images, as well as the stylesheets are in a subfolder inside assets/images and assets/stylesheets.

here my gems:

gem 'rails', '4.0.0'
gem 'sass-rails', '~> 4.0.0'

I'm deploying with capistrano, but I don't think this is a capistrano related problem, assets are well compiled.

EDIT What i've (unsuccessfully) tried until now:

image-url('image.jpg'); -> http://www.mydomain.it/images/image.jpg
image_url('image.jpg');    -> same as above
url(image-path('header.jpg'));  -> http://www.mydomain.it/images/image.jpg
asset-url('image.jpg', image); -> http://www.mydomain.it/image.jpg

problem still remains: assets are compiled but requested without digest.

EDIT

Following this question Rails 4 image-path, image-url and asset-url no longer work in SCSS files I moved around my assets and using the combination of asset-url and putting my assets in /public folder, background images are working, even though the problem still remains as the application is not using the timestamped version of the images. So only a (not that good, nor that bad) workaround.

like image 608
sissy Avatar asked Feb 08 '14 19:02

sissy


People also ask

How to get image URL from CSS file in rails?

Rails 4.0.0 will look image defined with image-url in same directory structure with your css file. For example, if your css in assets/stylesheets/main.css.scss, image-url ('logo.png') becomes url (/assets/logo.png). If you move your css file to assets/stylesheets/cpanel/main.css.scss, image-url ('logo.png') becomes /assets/cpanel/logo.png.

How do I add a background image to a rails page?

If you are using it as a background-image: property, then your line of code should be background-image: image-url ('logo.png'). This works for both less and sass stylesheets. If you are using it inline in the view, then you will need to use the built in image_tag helper in rails to output your image.

How does Sass-rails generate a CSS file?

The example used before was a controller called "projects", which generated an app/assets/stylesheets/projects.scss file. In development mode, or if the asset pipeline is disabled, when this file is requested it is processed by the processor provided by the sass-rails gem and then sent back to the browser as CSS.

How do I get the URL of a logo in rails?

Your first formulation, image_url ('logo.png'), is correct. If the image is found, it will generate the path /assets/logo.png (plus a hash in production). However, if Rails cannot find the image that you named, it will fall back to /images/logo.png.


2 Answers

Either change the filename from .css to .css.erb and use asset_url:

background-image: url(<%= asset_url('x-icon.png')  %>);

Or you can use scss and do

background-image: url(asset-path('x-icon.png'));

Do not include "assets" in the path, i..e not "assets/x-icon.png", this does not work.

To test this locally ensure your assets configuration mimics that of production, e.g.

      config.public_file_server.enabled  =  true      
      config.assets.compile              =  true
      config.assets.digest               =  true

Or if you start in production environment ensure config.public_file_server.enabled = true so the public directory is served by Rails, usually it would be served by Apache or similar.

  • Rails 5.1
like image 185
Kris Avatar answered Nov 07 '22 21:11

Kris


Some things to consider:

  • Make sure the image is not "gitignored" or something
  • Make sure the same image is not under public folder
  • Make sure asset-related gems are directly in the Gemfile, and not under group: :production or something. This is the new rails norm
  • Run rake assets:clobber and remove the tmp folder which contains sass cache
  • Run RAILS_ENV=production rake assets:precompile manually under production environment, and let us know the list of files generated under public
  • Run rake assets:precompile in Development mode, it could provide more logs
like image 30
Subhas Avatar answered Nov 07 '22 22:11

Subhas