Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Turbolinks with carrierwave images as CSS background-image

I've been using turbolinks along this year but lately I'm getting this annoying bug. Images uploaded via carrierwave are loaded in the site with absolute URL's in the first request, but when you start browsing in the site via turbolinks, all carrierwave images change to relative paths. <%= image_tag "image.jpg %> elements work ok, but the images are loaded as CSS background-image, they don't appear. This apparently happens only on chrome (I have Versión 31.0.1650.57 m). I made a trace via console and all images are loaded in the document, so I went to the Inspector and disabled/enabled the property 'background-image' of the specific element and the magic happened: the image appeared.

I'm using rails 3.2.14, with turbolinks:

gem 'turbolinks', '1.3.1'
gem 'jquery-turbolinks', '2.0.1'

I already tested this on Firefox 25.0.1 and it works ok.

Any suggestion? Thanks

like image 926
Core2Juan Avatar asked Nov 18 '13 15:11

Core2Juan


1 Answers

I just figured out that if you use absolute url's for background images the bug dessapears. So this is how I call carrierwave images in my helper:

img = ProductImage.find(id) 
"#{request.protocol}#{request.host_with_port}#{img.photo}"

photo is the attribute used with carrierwave uploader.

like image 170
Core2Juan Avatar answered Oct 21 '22 04:10

Core2Juan