Turbaroinks与载波图像作为CSS背景图像

时间:2022-06-10 19:40:34

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.

我一直在使用turbolinks,但最近我得到了这个烦人的bug。通过carrierwave上传的图像在第一个请求中以绝对URL加载到站点中,但是当您通过turbolinks开始在站点中浏览时,所有载波图像都会更改为相对路径。 <%= image_tag“image.jpg%>元素工作正常,但图像作为CSS背景图像加载,它们不会出现。这显然只发生在chrome(我有Versión31.0.1650.57m)。我做了一个跟踪通过控制台和所有图像都加载到文档中,所以我去了Inspector并禁用/启用了特定元素的属性'background-image'并且发生了魔法:图像出现了。

I'm using rails 3.2.14, with turbolinks:

我正在使用rails 3.2.14,带有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.

我已经在Firefox 25.0.1上测试了它,它运行正常。

Any suggestion? Thanks

有什么建议吗?谢谢

1 个解决方案

#1


15  

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:

我只是想通了,如果你使用绝对url的背景图像,bug dessapears。这就是我在帮助器中调用carrierwave图像的方式:

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

photo is the attribute used with carrierwave uploader.

photo是与carrierwave uploader一起使用的属性。

#1


15  

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:

我只是想通了,如果你使用绝对url的背景图像,bug dessapears。这就是我在帮助器中调用carrierwave图像的方式:

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

photo is the attribute used with carrierwave uploader.

photo是与carrierwave uploader一起使用的属性。