Rails 3.1 and Image Assets

Question

I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.

Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.

Is there some sort of image caching going on? This is just local development using pow to serve the pages.

Even destroying the whole images folder the images are still being served.

Am I missing something?

that's not the case with 3.1 using the asset pipeline. You would use the command rake assets:precompile which will compress those files and move them to the public file — Lee, Jun 02 '11 at 11:25
Well moving them to the public folder worked, all a bit strange as they worked fine being served from the assets folder. Maybe have to wait for more docs on 3.1. — Lee, Jun 02 '11 at 11:36
I understand your frustration. Apparently release candidates don't get documented very well. — tybro0103, Jun 21 '11 at 18:55
Leave them in assets, just don't include a folder path at all. See my answer below. — Andrew, Jun 25 '11 at 19:49

score 226 · Answer 1 · edited Mar 16 '13 at 07:30

226

In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png

Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.

Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.

edited Mar 16 '13 at 07:30

Prakash Murthy

12,923
3
46
74

answered Jun 06 '11 at 21:17

Lee McAlilly

9,084
12
60
94

Yea I have played with this allot and they have some way to go to make it easier. Yes putting them in my assets folder works but then you can use the assets tag. So I am waiting to see what more info comes out. – Lee Jun 08 '11 at 10:22
1

Thanks, helped me a lot, too. This is the kind of stuff that's driving me crazy as a dude trying to learn Rails having come from other web development frameworks. – jn29098 Aug 04 '12 at 12:36
6

and what would happen if two different folders contained the same filename ? – Hady Elsahar Jan 17 '13 at 12:38
1

Not sure why they had to change something that already worked. – Tastybrownies Dec 06 '13 at 20:47

tybro0103 · Answer 2 · 2011-06-22T13:34:35.000

98

You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:

background-image:url(<%=asset_path "admin/logo.png"%>);

You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.

In production, make sure

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

happens upon deployment.

edited Jun 22 '11 at 13:34

answered Jun 21 '11 at 18:53

tybro0103

48,327
33
144
170

44

There are new image helpers in sass: image_url, image_path,... More can be found here: http://edgeguides.rubyonrails.org/asset_pipeline.html No need to use erb as a preprocessor anymore – Martin Wawrusch Aug 13 '11 at 07:29
1

I tried the sass-rails helpers (image_url and image-url) into a css.scss file but it does not seems to be interpreted. Any clue ? – invaino Aug 17 '11 at 18:08
@invaino Do you have sass-rails instead of just sass in your Gemfile? – Jakub Hampl Sep 16 '11 at 13:43
@user288024 not the case in any versions of 3.1 I've used, but 3.1 has undergone many changes since the time of this posting. – tybro0103 Oct 07 '11 at 18:44
@user288024 could you give a concrete example? I don't see any problems so far – Ivan -Oats- Storck Nov 06 '11 at 05:20
2

The generated scss files are named .css.scss by default, no shitting of the bed has happened yet – Adrian Macneil Nov 14 '11 at 03:14
2

For some reason image-url didn't work for me, but asset-url('myimage.png', image) worked perfectly. (Rails 3.1) – Elad Jan 06 '12 at 06:49
1

In case anyone upgrading from 3.0 is wondering, you can just rename your stylesheets from `.css` to `.css.erb` (after you've moved them into `app/assets` to get the erb processing without sass. – William Denniss Jan 27 '12 at 07:50
it's working though i prefer writing Pure CSS only withouht embedding other languages . – Hady Elsahar Jan 17 '13 at 12:40

score 22 · Answer 3 · answered Jun 25 '11 at 19:48

22

For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...

div.example { background: url('example.png'); }

... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...

In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.

Kind of frustrating there aren't better docs out there for this big of a change.

answered Jun 25 '11 at 19:48

Andrew

42,517
51
181
281

3

When there are naming conflicts, the first path that appears in the config.assets.paths array is the file that is chosen. This can be avoided by using the `asset_path()` helper and specifying the directory. – Joseph Ravenwolfe Nov 14 '11 at 19:12
6

This "magically works" because the css file and the images are in the same location. CSS file references are relative to the location of the css file. – Bill Leeper Nov 22 '11 at 21:04
The asset pipeline can be a bit of a black box, especially for front-end developers, but it offers a lot of great features like not having to worry about file paths and automatic cache busting. – Miles Jan 22 '14 at 20:59

lflores · Answer 4 · 2014-05-26T16:58:03.883

16

In rails 4 you can now use a css and sass helper image-url:

div.logo {background-image: image-url("logo.png");}

If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.

edited May 26 '14 at 16:58

answered Aug 01 '13 at 20:25

lflores

3,770
3
19
24

1

This is correct (for rails 4). Vote this answer up! – ahnbizcad Oct 14 '14 at 10:07
Rails 'helps you out' by putting in the url keyword as well as the string. This means that you can do things like. `div.logo {background: image-url("logo.png") no-repeat center;}` – Antony Denyer Apr 29 '16 at 17:39

Tilo · Answer 5 · 2011-11-18T17:43:57.503

10

when referencing images in CSS or in an IMG tag, use image-name.jpg

while the image is really located under ./assets/images/image-name.jpg

edited Nov 18 '11 at 17:43

answered Jun 05 '11 at 04:22

Tilo

33,354
5
79
106

I think this is wrong when it comes to CSS - using rails 3.1.0.rc4 when I use `background: url('sort_asc_disabled.png')` it works for the file app/assets/images/sort_asc_disabled.png. – wonderfulthunk Jun 27 '11 at 20:45

score 2 · Answer 6 · answered Mar 12 '12 at 00:53

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.

The solution I chose is @Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!

score 0 · Answer 7 · edited May 23 '17 at 11:54

0

The asset pipeline in rails offers a method for this exact thing.

You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:

.logo{ background:url(image_path('admin/logo.png'));

(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)

Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?

edited May 23 '17 at 11:54

Community

1
1

answered Oct 10 '13 at 00:57

benrugg

2,088
1
16
8

I know this question is a couple years old, but this was the first page I found on google when searching for this, so it would be awesome to select an answer so others can easily reference this! – benrugg Oct 10 '13 at 00:58

Rails 3.1 and Image Assets

7 Answers7

Linked