I've searched through Stack lot of times but still nothing works for me.
Images Ive set in my css.erb file does not show in heroku app.
here is my css file example
.bird-box {
position: relative;
height: 600px;
background: url(<%= image_path 'bird-bg.jpg' %>);
background-size: auto 600px;
background-position: top center;
background-attachment: fixed;
overflow: hidden; }
I've changed producion.rb
config.serve_static_files = true;#ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
But that did not help at all.
Also I tried to compile locally than push to heroku, still no result. Can anybody tell me the way out?
Go to development console in your browser and check if images are loaded
Try to precompile assets on heroku using heroku run rake assets:precompile
Related
In a Rails 6 app, I have an image file in app/assets/images/bgs/abc.jpg
To attach that image to body background, how can I have a style declaration in a style tag in application.html.haml that works the same for both local development and when pushed to heroku?
Works in development, but not Heroku, due I suppose to asset handling differences:
#application.html.haml
%style
body::after {
content: "";
background: url("/assets/bgs/abc.jpg"); ### WORKS DEVT ONLY ###
background-size: cover;
background-repeat: no-repeat;
opacity: 0.12;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-attachment: fixed;
z-index: -1;
}
I understand I should be using asset_path but none of these work in development:
background: asset_path("/bgs/abc.jpg");
background: asset_path("bgs/abc.jpg");
background: asset_url("/bgs/abc.jpg");
background: asset_url("bgs/abc.jpg");
There is a spectacular amount of inconsistent information out there, some cases saying use asset-url or asset-path, some cases saying asset_url or asset_path, and even some cases saying use url(~filename.jpg), some say use background: some say background-image.
Is there a simple way to use a background image with the exact same code working both on development and Heroku?
Rails on production mode will precompile assets so that all images on assets folder (and child folders) will be precompiled and saved as image name-fingeprint on public folder, for example: i have a image assets/images/bgs/pragmatic_programmer.jpg, then after run command rake assets:precompile, this image will become /public/assets/bgs/pragmatic_programmer-9aa8a13ac97f205fe891bee7c42c6e711f997186d8975d5a4106ca2fe53ccc61.jpg.
That the cause your app work on development mode but not on production mode since the images path changed, you can access new compiled images by ActionView::Helpers::AssetTagHelper#image_path as below
#application.html.haml
%style
body::after {
content: "";
background: url(= image_path("bgs/abc.jpg"));
...
}
you could test on development mode, just run rake assets:precompile before start server.
The answer is for the style definition to be:
background: url( asset_path("bgs/abc.jpg") );
that works on both development and production.
I'm using Rails with webpacker. Everything works fine locally but as soon as I push up to heroku it breaks.
I removed everything except my own scss and noticed some styles weren't loading in production.
For example in the same file, .fabric-container will not be present, but #renderCanvas will:
.fabric-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
border-radius: 10%;
overflow: hidden;
&:after {
content: '';
display: block;
margin-top: 100%;
}
}
#renderCanvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .6;
}
Here is a shot of the css with everything else stripped out, and on the bottom is the css of the page on prod. Totally missing .canvas-container Works fine locally!
Many red herrings in this debug session... but I knew SOMETHING was altering the output css.
Turns out Rails Jumpstart Pro includes tailwind and purgecss.
We have included PurgeCSS by default to automatically remove unused
CSS when deploying to production. This greatly reduces the size of
TailwindCSS in production to deliver a much faster experience in
production.
This is located in postcss.config.js which is why I didn't see it in config/environments etc.
So if this is happening to you, check postcss.config.js, and either add your files there or remove it altogether!
I've just started to work with the rails asset pipeline, I'm a front-end guy.
I'm trying to use image-url helper within sass files so that I don't have to hard-code the path.
The following SASS
.some-class
background: image-url("image.png")
generates the following CSS
.some-class{
background: url("asset/image.png");
}
How do I use the image-url helper to generate the following css, without hard-coding the image path ?
.some-class{
background: url("asset/image.png") no-repeat 0 0 #fff;
}
You can use,
.some-class
background-image: image-url("image.png")
background-repeat: no-repeat;
background-color: #fff;
and so on.
or
background: #fff image-url("image.png") no-repeat 0 0;
should work.
You propably should use:
background-image: asset-url("image.png", image) no-repeat 0 0 #fff;
The asset-url is a sass/rails feature, which lets the asset pipeline do some (production) work for you. You can read about that feature here.
Using the helper is preferable over a plain url("image.png"), as it gives you finger printed URLs in production. See this StackOverflow answer.
In my Heroku rails app. I follow this instruction and implemented CDN.
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
It is almost working correctly, but the background image I wrote in css.scss.erb file doesn't show up.
My files and the problem are below.
custom.css.scss.erb
.ap-sidebar .ap-nav li a span {
background: transparent url(asset-path('nav_arrows.png', image)) no-repeat 0 50%;
}
staging.rb
config.action_controller.asset_host = "//#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"
The output url should be:
staging-bucket.s3.amazonaws.com/assets/nav_arrows-digest.png
but the indeed output is like below:
.s3.amazonaws.com/assets/nav_arrows-digest.png
I changed asset-path to asset-url, but it didn't work.
How can I fix this?
Two things you should check:
The environment variable ENV['FOG_DIRECTORY'] may be nil. You can check the env variables with the command:
heroku config --app
More details: https://devcenter.heroku.com/articles/config-vars
The mode of your app running on Heroku. By default, your app will run in production mode, while you're configuring for staging mode. You can change the mode by following this article: https://devcenter.heroku.com/articles/multiple-environments
I found a way to solve this.
just change this:
.ap-sidebar .ap-nav li a span {
background: transparent url(asset-path('nav_arrows.png', image)) no-repeat 0 50%;
}
to this:
.ap-sidebar .ap-nav li a span {
background: transparent url('nav_arrows.png') no-repeat 0 50%;
}
css.scss.erb is not working, so I also omit erb from the file.
I'm working with Rails 3.1's asset pipeline and although it seems to work flawlessly in my development environment on my localhost, I'm having huge issues with it on engine yard.
Here's my basic problem.
When I include images for a background in one of my scss files:
a {
color: #3c7f8b;
font-weight: bold;
padding-left: 35px;
font-size: 13px;
display: block;
background: white url(shade.png) top right;
&:hover {
color: #222222;
background: white url(shade2.png) top right; }
&.on {
color: #222222;
background: white url(shade2.png) top right; } } }
I run into the following issues: Even though I have precompiled my assets, the browser requests /assets/shade.png instead of /assets/shade-FINGERPRINT.png which is the actual file that exists.
Does anybody know what I can fix this issues with referencing images in my assets folder inside my .scss files?
You should use image-url rather than url to reference images when using scss in Rails 3.1.
Also, ensure you load compass before sass-rails, as sass-rails over-rides the asset methods to work with the asset pipeline.
Lastly, if you're using capistrano to deploy, add in
load 'deploy/assets'
To enable asset compilation when you deploy.
Check out the answer from 'tybro0103' on this post - Rails 3.1 and Image Assets
basically change the file from scss to scss.erb and then use the asset_path helper method
pre-compile before deploy
disclaimer: i have not tried this myself
qnm Actually I think there is an error with the image_url helper. Not sure if they fixed it but I saw a recommendation to use asset_url with the "image" explicting stated.
i.e. asset_url("some.img","image)