I read through every link on Stack Overflow and Google. I have spent many hours trying stuff. But could not figure this issue out.
I have following folder structure in my app assets
app
->images
->application (folder)
image1..
image2..
->icons (folder)
image3..
image4..
I have application.css file in my stylesheets folder like below:
app
->stylesheets (folder)
application.css
->application (folder)
app.css
The application.css has following entry:
*= require_tree ./application
Thus it is loading my app.css file which has all the css for my app. In my app.css I am using :
{background: url('icons/user-business-gray.png') no-repeat 2px center transparent;}
My config/environments/production.rb has :
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
#config.serve_static_assets = false
config.assets.compile = false
config.assets.digest = true
My config/initializers/assets.rb has :
Rails.application.config.assets.paths << Rails.root.join( "app/assets/images/application")
I did :
RAILS_ENV=production rake assets:precompile
I can see all my images hashed in public/assets, public/assets/application and public/assets/icons properly.
It all works fine in development mode. But I cannot see any images referenced in in app.css file in production mode.
If I add an image to .erb directly using <%= image_tag('icons/user-business-gray.png') %> I can see the image correctly. But I cannot see any images referenced from app.css as referenced above.
I even changed the name of app.css to app.css.scss and referenced the image like :
{background: url(assets-path('icons/user-business-gray.png')) no-repeat 2px center transparent;}
but still the same issue. Any help is much appreciated.
Try changing the filename to app.css.scss and using the assert-url helper:
{background: asset-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
This has fixed the issue:
{background: image-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
Related
I feel like I tried all solutions I found here and on some blogs but something is still wrong and I have no idea what.
My error:
...
Started GET "/fonts/amaze.ttf" for 83.9.18.180 at 2014-11-26 09:10:21 +0000
...
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/amaze.ttf"):
...
Of course on localhost it isn't working either.
I am using rails 4.1.1
My font is located in:
assets/fonts/amaze.ttf
I even relocated it to check if it would work: assets/amaze.ttf -it wasn't.
My current solution in application.css.scss file:
#font-face {
font-family: 'Amaze';
src: font-url('amaze.ttf');
}
.amaze {
font-family: 'Amaze';
}
I tried some configuration in application.rb but had no effect:
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Do I even have to configure anything in application or development/production files?
EDIT
(kind of) FIXED a PROBLEM
The problem was that I had a broken font...
more details:
I had font from here http://fontzone.net/download/amaze-normal
and it was broken (I mean not exactly broken, it worked on linux, but not with font-face, no idea why, if it's worth anyone's efforts give it a try to figure out what was the issue)
I tried another font from another source:
http://www.fontcubes.com/Amaze.font
and it worked! yey! -
EDIT
I had similar issue with more fonts (both otf and ttf) so I would say problem is still open ;p
Utilize the Asset Pipeline or move your fonts to the public directory.
Your problem here is that the path /fonts/amaze.ttf is not hitting the Rails Asset Pipeline. It would need to be prefaced with /assets in order to use the Asset Pipeline, like /assets/fonts/amaze.ttf or /assets/amaze.ttf.
You have two main options here:
Update the path request:
So use /assets/amaze.ttf instead of /fonts/amaze.ttf.
Be aware that in order for the path /assets/fonts/amaze.ttf to work you would need to put the amaze.ttf font in /app/assets/fonts/fonts/ or /vendor/assets/fonts/fonts/. The double fonts directory ensures there is a fonts directory in /public/assets after the assets are compiled. See this answer for more info.
Move your fonts directory to your public directory:
Since the requested path doesn't utilize the Asset Pipeline anyway, you can simply move your fonts directory to the /public/ directory and the web server will automatically serve it. So your font(s) should be located at /public/fonts/amaze.ttf, etc.
That should do it!
I have also face this problem with font-awesome but it is my general research for fonts.
I create a new directory under app/assets , named fonts. Then copy all the Fonts there and include it to the assets in application.rb file , like this :
config.assets.paths << Rails.root.join("app", "assets", "fonts")
rename your font-awesome.css to font-awesome.css.scss.erb and change the #font-face declaration in it like this
#font-face { font-family: "FontAwesome"; src: url('<%= asset_path('fontawesome-webfont.eot')%>');
src: url('<%= asset_path('fontawesome-webfont.eot?#iefix')%>') format('eot'),
url('<%= asset_path('fontawesome-webfont.woff')%>') format('woff'),
url('<%= asset_path('fontawesome-webfont.ttf')%>') format('truetype'),
url('<%= asset_path('fontawesome-webfont.svg#FontAwesome')%>') format('svg');
font-weight: normal; font-style: normal; }
Hope this will helpful :)
There are more ref Font-face
For me it was a file permission error, I had copied the files from another computer. once I fixed the permissions, it worked.
For me, it was as simple as my import in application.scss used https// instead of https:// for the URL. Gotta read closely next time.
Thanks guys.
I found a solution, why not put fonts/*.ttf into app/assets/images/fonts/*.ttf for dev env?
At the same time keep config/environments/development.rb still the default config.serve_static_assets = false false value.
This works for me.
When i move to production many assets are missing. There is no background image but there are styles for background from css. Many JS doesn't load ..
I put in config production.rb :
config.cache_classes = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.assets.compress = true
config.assets.compile = false
config.assets.digest = true
In application.rb :
config.assets.precompile += %w( ie.css )
config.assets.paths << "#{Rails.root}/app/assets/fonts"
but fonts doesnt load. I see in public/assets all fonts but there isnt any on my site.
Can someone write answer - how config application to work on production ? Why i have xxx.jpg from css file but havent got yyy.jpg from that same css file..
CSS for background:
body{
line-height: 1;
background: #fff url('wallpaper.jpg') top left;
IMAGES location - assets/images
FONTS location - assets/fonts
Sometimes in chrome console i see :
GET ..../assets/wallpaper.jpg 404 (Not Found) xxxxxx/:11
GET...../assets/main_page.png 404 (Not Found) xxxxxx/:30
GET ...../assets/fonts/Lato-Bol.ttf 404 (Not Found)
and sometimes not, but always there is no fonts and many assets.
My application css:
*= require_self
*= require chosen
*= require fancybox
*= require page
*= require_tree .
*/
Try using image-url instead of url.
background: #fff image-url('wallpaper.jpg') top left;
From the Asset Pipeline documentation:
When using the asset pipeline, paths to assets must be re-written and
sass-rails provides -url and -path helpers (hyphenated in Sass,
underscored in Ruby) for the following asset classes: image, font,
video, audio, JavaScript and stylesheet.
I'm confused about how works assets pipeline, im using a gem called aloha-rails and it have the next CSS rule:
button.aloha-button {
background: url("../img/base.png") no-repeat scroll 0 0 transparent !important;
}
If I run it on local, that rule is on file:
http://local.dev/assets/aloha/css/aloha.css?body=1
And I CAN see the image, it is loaded from this address:
http://local.dev/assets/aloha/img/base.png
But when I run it on heroku, on when I precompile assets on local the css rule is loaded from applications.css, the rule still with ../img/base.png so the image is trying to be loaded from:
http://server.herokuapp.com/img/base.png
and that DOESNT exist, so I receive a 404 error and dont see the image.
Write as following: Remove the dots(..) before the path.
button.aloha-button {
background: url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
Please do let me know if not working still.
In order to access your image assets in production, where asset precompilation will stick a hash at the end of each filename, you need to use the img-url helper provided by sass-rails if your css has a .scss or .sass extension, or you can use the asset_path helper if you add .erb to the end of your stylesheet filenames:
button.aloha-button {
background: image-url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
It seems like the aloha-rails gem doesn't do this. Probably also needs to drop the .. in front of the path.
After deploy on heroku cedar, images desapear.
I've a CSS like :
:css
/* */
table.table thead .sorting { background: url('assets/datatables/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('assets/datatables/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('assets/datatables/sort_desc.png') no-repeat center right; }
/* */
table.table thead .sorting_asc_disabled { background: url('assets/datatables/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('assets/datatables/sort_desc_disabled.png') no-repeat center right; }
and relative png into app/assets/images/datatables/Locally works, but not on Heroku.
I could also use = asset_tag('datatables/icon.png') ..., but how to do it inside CSS ?
I've also tried config.action_dispatch.x_sendfile_header = nil in config/environments/production.rb without success.
In the production environment the assets will have an MD5 thumbprint appended to their URL. It is important that you use the asset path helpers so that the right filename is used.
It appears that you are using Haml, based on the :css filter.
In Haml you can interpolate Ruby into the doucment with #{ ruby }
:css
table.table thead .sorting { background-image: url(#{ asset_path('datatables/sort_both.png')}) }
... and so on.
If you are using Sass/SCSS, you can use the built in asset helpers.
table.table thead .sorting {
background-image: asset-url('datatables/sort_both.png');
}
Its a little more complicated if you are using plain CSS. You'll need to append .erb to the css file. ('assets/stylesheets/file.css.erb')
table.table thead .sorting {
background-image: url(<%= asset_path('datatables/sort_both.png') %>);
}
You should use Sass or SCSS. Its the cleanest and leanest.
I just got it working myself.
The key is putting this line in your application.rb:
config.assets.initialize_on_precompile = false
Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
and run:
bundle install
NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).
Also, make sure to put this line in your application.rb (sorry to repeat, but its important):
config.assets.initialize_on_precompile = false
Add these to your application.js
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
Add this to your application.css:
*= require dataTables/jquery.dataTables.bootstrap
And add this to your js.coffee file for your controller you are using datatables in:
If you are using fluid containers:
#// For fluid containers
$('#dashboard').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
If you are using fixed width containers:
#// For fixed width containers
$('.datatable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
My stylesheet has:
.asc {
font-size: 2em;
background-image: url(/images/up_arrow.gif);
}
.desc {
background-image: url(/images/down_arrow.gif);
}
The font-size works but the background image (arrow) doesn't.
I get ActionController::RoutingError (No route matches [GET] "/images/up_arrow.gif"):
I tried lots of things in routes but nothing worked.
Try this:
.asc { font-size: 2em; background-image: url(/assets/up_arrow.gif); }
.desc { background-image: url(/assets/down_arrow.gif); }
That's how I do it in a 3.1 app I'm working on. Your /images is probably mapped to app/public/images.
Finally found that I needed to do the new precompile of assets step.
'I shoulda read the manual'
Compiled assets are put in public/assets directory by default (the destination is defined in config.assets.prefix).
To create compiled versions of your assets use bundle exec rake assets:precompile
If you don't have write access for the production file system, use this task locally and then copy the compiled asset files.
The asset compilation process:
1. Concatenates & compresses all JavaScript files into one master. Uglifier is the default for the process.
2 Compresses (minifies) all CSS files into one master .css file. CSS is compressed by yui by default.
3. Allows for high level languages like coffeescript to use the assets.
Note: It is possible (though not a great idea) to disable the asset pipeline by changing config/application.rb and set
config.assets.enabled = false
You can skip the asset pipeline when creating a new application with the —skip-sprockets option, e.g. rails new appname --skip-sprockets
You can also set config.assets.compile = true This way the assets are only compiled when a request for them is made.
Dumb question perhaps, but are you positive that /images/up_arrow.gif exists?
When you 404 on an public asset in it just falls through to the rails router. It's not really a routing problem; you just get a routing error because there are no routes defined for static assets.
I had this same issue with Rails 3.2.13.
Solution was to modify the css to this:
.asc { font-size: 2em; background-image: url(up_arrow.gif); }
.desc { background-image: url(down_arrow.gif); }