Rails 4 image-path, image-url and asset-url no longer work in SCSS files

Question

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

@depa - that simply converted to "/logo.png", which does not bring up my image. — at., May 30 '13 at 18:19
Are you using that helper inside a `.css` file or in a `.css.scss` file? — Marcelo De Polli, May 30 '13 at 18:22
@depa - not using any helper. I think this is a bigger problem of assets just not working for my images folder — at., May 30 '13 at 18:23
Yes, `asset_path` is a helper - https://github.com/rails/sass-rails#features — Marcelo De Polli, May 30 '13 at 18:24
@depa - oh I see what you're asking. It's inside a `.css.scss` file — at., May 30 '13 at 18:30
Not sure it'll help, but the `assets/logo.png` path will work only on development. If you're trying that on production you have to add the fingerprint to the file name. http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care — Marcelo De Polli, May 30 '13 at 18:31
I just tested that with a newly generated Rails 4 app. I created the `assets/images` directory, put an image in there and the standard `/assets/filename.png` path worked right off the bat. — Marcelo De Polli, May 30 '13 at 18:38
@depa - wow... what did I do wrong? I have a standard images directory. it all works if I move `filename.png` into the `stylesheets` directory... even then though the `image-url` type helpers don't work properly. — at., May 30 '13 at 18:39
Is it a brand new app or an upgraded one? Perhaps your `config.assets.paths` array is messed up? — Marcelo De Polli, May 30 '13 at 18:40

score 118 · Answer 1 · edited Nov 08 '16 at 23:34

118

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 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. Once again, no prefixing <%= image_tag 'logo.png' %>
Lastly, if you are precompiling your assets, run rake assets:precompile to generate your assets, or rake 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.

edited Nov 08 '16 at 23:34

Sprachprofi

1,229
12
24

answered Nov 26 '13 at 07:32

cdaloisio

1,516
1
12
8

1

Another point is to read the documentation http://guides.rubyonrails.org/asset_pipeline.html. Also can you see in the Web Developer Debug of your browser if the images are being loaded? – H.Rabiee Nov 28 '13 at 09:24
4

Now this is how you write an answer. Each scenario. Predicting the "what ifs", no loose ends. A mark of someone who has "seen combat" (really worked through the problem). – ahnbizcad Nov 02 '14 at 04:07
I've been bitten by missing RAILS_ENV=production on several occasions. – Sixty4Bit Oct 04 '16 at 20:33

score 65 · Answer 2 · edited Jul 05 '15 at 18:13

65

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).

edited Jul 05 '15 at 18:13

Roman Pushkin

5,639
3
40
58

answered Nov 24 '13 at 19:00

Nick Urban

3,568
2
22
36

2

Just to jump on this, I was bitten by using double quotes on the image path instead of single quotes. You much use single quotes with the asset helpers in the css/scss files. – d_ethier Nov 27 '14 at 03:45
i am getting "undefined local variable or method `image'" – Muhammad Umer Mar 02 '16 at 01:53
Is it possible you accidentally put a space before the word image? – Nick Urban Mar 03 '16 at 02:02

score 10 · Answer 3 · edited May 07 '17 at 12:57

10

I just found out, that by using asset_url helper you solve that problem.

asset_url("backgrounds/pattern.png", image)

edited May 07 '17 at 12:57

rmcsharry

5,363
6
65
108

answered Jun 10 '13 at 20:37

Leftis

119
9

1

I got `undefined local variable or method 'image'` error. – Penguin May 22 '17 at 06:51
Maybe something changed on rails, this answer is old! You can try `asset_path("", type: :image)` – Leftis Sep 15 '17 at 11:41

score 8 · Answer 4 · edited Nov 27 '15 at 03:11

8

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');

edited Nov 27 '15 at 03:11

apscience

7,033
11
55
89

answered Mar 16 '15 at 17:21

ykwx

250
3
5

Thanks, I was doing `assets/img.jpg` or `../assets/img.jpg` which obviously doesn't work in any directory. `/assets/img.jpg` does. TY – em_ Jun 26 '17 at 23:11

score 5 · Answer 5 · answered Nov 25 '13 at 12:15

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.

If you want to use image directly under assets/images directory, you can use asset-url('logo.png')

score 5 · Answer 6 · answered May 27 '16 at 04:48

5

for stylesheets: url(asset_path('image.jpg'))

answered May 27 '16 at 04:48

koch

53
2
4

3

What's the main difference between `url(asset_path('image.jpg')`, `url('image.jpg')` and `image-url('image.jpg')`? I'm working with ***Rails 5.0.0.1*** and `url()` works fine in ***SCSS*** files and in ***html.erb*** files I use `asset_path()` so I'd like to know the correct way to go. Thanks in advance. – alexventuraio Jan 20 '17 at 04:15
`asset_path` add to image file a digest appendix. It's actually for production, after every deploy the a digest appendix will be changed and user's browser will download new version of images. – Alex Kojin Aug 17 '17 at 06:47

stevec · Answer 7 · 2021-02-01T12:07:07.890

0

In case anyone arrives looking for how to generate a relative path from the rails console

ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"

Or the controller

include ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"

edited Feb 01 '21 at 12:07

answered Feb 01 '21 at 06:49

stevec

41,291
27
223
311

Rails 4 image-path, image-url and asset-url no longer work in SCSS files

7 Answers7

Linked