Rails 4 image-path, image-url and asset-url no longer work in SCSS files
Are we supposed to use something else aside from image-url
and others in Rails 4? They return different values that don't seem to make sense. If I have logo.png
in /app/assets/images/logo.png
and I do the following, this is what I get:
image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")
Of course none of these work because they need at least /assets
in front.
UPDATE: Actually, I just noticed, how do I access images in Rails 4? I have an image at /app/assets/images/logo.png
. But if I go to any of the following URLs, I still don't see my image:
http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png
UPDATE 2: The only way I can bring up my logo.png
is by moving it into the /app/assets/stylesheets
directory and then pulling up:
http://localhost:3000/assets/logo.png
I just had this issue myself. 3 points that will hopefully help:
- If you place images in your
app/assets/images
directory, then you should be able to call the image directly with no prefix in the path. ie.image_url('logo.png')
- Depending on where you use the asset will depend on the method. If you are using it as a
background-image:
property, then your line of code should bebackground-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 inimage_tag
helper in rails to output your image. Once again, no prefixing<%= image_tag 'logo.png' %>
- Lastly, if you are precompiling your assets, run
rake assets:precompile
to generate your assets, orrake assets:precompile RAILS_ENV=production
for production, otherwise, your production environment will not have the fingerprinted assets when loading the page.
Also for those commands in point 3 you will need to prefix them with bundle exec
if you are running bundler.
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
.
The next question is: why isn't Rails finding your image? If you put it in app/assets/images/logo.png, then you should be able to access it by going to http://localhost:3000/assets/logo.png
.
If that works, but your CSS isn't updating, you may need to clear the cache. Delete tmp/cache/assets
from your project directory and restart the server (webrick, etc.).
If that fails, you can also try just using background-image: url(logo.png);
That will cause your CSS to look for files with the same relative path (which in this case is /assets).
I just found out, that by using asset_url
helper you solve that problem.
asset_url("backgrounds/pattern.png", image)
I had a similar problem, trying to add a background image with inline css. No need to specify the images folder due to the way asset sync works.
This worked for me:
background-image: url('/assets/image.jpg');