1

I have an application that is sorting using column headers. When the user clicks on the header an icon appears next to the header to show the direction of the sort.

It uses CSS to choose the icon and present it:

.pretty th .asc {
    background-image: url(up-arrow.png);
}

.pretty th .desc {
    background-image: url(down-arrow.png);
}

This works on my development version, even though I would expect the path to the icons to be '/images/up-arrow.png' rather than 'up-arrow.png'. However when I deploy the application to my server the icons no longer appear regardless whether I prefix with /images or not. Any ideas?

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
user1693733
  • 33
  • 4
  • VB6 those were the days – Richard Peck Feb 02 '16 at 20:10
  • Please refrain from "Thanks". While it might seem like a courtesy thing, Stack Overflow is a reference book, not a discussion board. Think of a cookbook or encyclopedia of programming questions and answers; Would you see "Hi", "Thanks" and similar in those? Courtesy is great but salutations, valedictions and signatures are considered fluff and we'd prefer conciseness and sticking to the details. – the Tin Man Feb 02 '16 at 20:15

2 Answers2

4

Because you're deploying to a non-development environment, Rails will expect to "precompile" your assets. This means that the filenames will be fingerprinted (they'll have a large number appended to them).

Since asset fingerprinting means the filename is different in production / staging, you have to use one of the asset-helpers in your CSS:

.pretty th .asc {
    background-image: image-url("up-arrow.png");
}

.pretty th .desc {
    background-image: image-url("down-arrow.png");
}

You'll want to look at "How to reference images in CSS within Rails 4" for specifics.

The one issue you may have is that you might have to switch your CSS to use either the SCSS / SASS proprocessor. This will give you access to the image-url helper.

Community
  • 1
  • 1
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
0

Because of the way the asset pipeline handles images, you need to reference the image name differently:

.pretty th .asc {
  background-image: url("/assets/up-arrow.png");
}

.pretty th .desc {
  background-image: url("/assets/down-arrow.png");
}
Brennan
  • 5,632
  • 2
  • 17
  • 24