Rails 4 Image fail in production

[Dave Castellano]

Hello,

Just upgraded to rails 4 and Bootstrap 3. Everything working fine
except the following line in assets/javascripts/questions.js.coffee:

$('#jumbotron').css('background-image' :'url("assets/Jumbotron2.png")')

Works in development but not production on Heroku. Image just does not
show up on Heroku.

Tried $('#jumbotron').css('background-image' :url(<%= asset_path
'Jumbotron2.png' %>))
which also worked in dev but not production. Changing application.js to
application.js.erb crashed heroku.

Any ideas?

Thanks,
Dave Castellano

--
Posted via http://www.ruby-forum.com/.

[mike2r]

Yes.  That's going to be an issue.  I'm not sure I can explain it well, but whenever you reference assets/ or asset_path, it needs to resolve that through sprockets.  In production, all assets are pre-compiled and sprockets isn't loaded.  when you use javascript to change the css to reference an asset_path, there's no resolution.  This doesn't happen in development because assets aren't precompiled and these paths can be resolved after changes to the css by javascript.

I would probably put the image in public/images/Jumbotron2.png and change your code the the following:

 $('#jumbotron').css('background-image' :'url("images/Jumbotron2.png")') 

[Dave Castellano]

> I would probably put the image in public/images/Jumbotron2.png and
> change
> your code the the following:
>
> $('#jumbotron').css('background-image' :'url("images/Jumbotron2.png")')

Unfortunately, that does not work in development or production
environments.

Thanks,

Dave

[Dave Castellano]

mike2r wrote in post #1140207:

> I would probably put the image in public/images/Jumbotron2.png and
> change
> your code the the following:
>
> $('#jumbotron').css('background-image' :'url("images/Jumbotron2.png")')

Unfortunately, that does not work in development or production
environments.

Thanks,

Dave

[mike2r]

sorry, it should have started with the root relative.  i tested this and it works, but the rest of your syntax threw an error, probably because I don't use coffee.  This is the line that worked for me:

$('#jumbotron').css('background-image' , 'url("/images/Jumbotron2.png")') 

note that the colon between 'background-image' and 'url ...' is now a comma.  The path to the image now starts with a slash.  This is the jquery form.  The other format you have with a colon may work in coffee.  At any rate, the path /images/... should work.  sorry, i should have tested this first.

mike

[Rick]

i would put the image in assets/images and refer to it as: :url("Jumbotron2.png")

[mike2r]

On Friday, March 21, 2014 12:13:30 PM UTC-4, Rick wrote:

i would put the image in assets/images and refer to it as: :url("Jumbotron2.png")

 

I'm hoping that Dave has already resolved this and moved on, but since a lot of people are viewing this thread, I wanted to update it.  I re-wrote this in coffeescript and re-tested.  Just to be clear, I'm testing in Rails 4.  The pipeline treatment for images was changed with Rails 4, so it's likely there would be a different result if you're running in Rails 3.1 or 3.2.  Also, my production environment is the default production environment and assets are pre-compiled.  

Dave's original reference of 'assets/Jumbotron2.png' worked in development, but not in production, the same result he had.

The second solution of putting the image in public/imagesJumbotron2.png and referencing '/images/Jumbotron.png' worked in both production and development.  FYI, the colon also worked when I re-wrote in Coffeescript.  

The third solution from Rick to reference url("Jumbotron2.png") was a little surprising.  I had expected it to work in development and not in production. It actually didn't work in either one.  In production, it's not working for the same reason as Dave's original statement.  The pipeline doesn't load in production so it either finds the image somewhere in the public directory or it doesn't load.  In development, I have learned that you must either use a helper (such as asset_path) or you must reference the assets/ directory as Dave did to trigger the pipeline processing.  Didn't know that.