Turbolinks将载波图像作为CSS背景图像 [英] Turbolinks with carrierwave images as CSS background-image

问题描述

今年以来，我一直在使用Turbolink，但最近却遇到了这个令人讨厌的错误。通过载波上传的图像会在第一个请求中以绝对URL加载到站点中，但是当您开始通过涡轮链接浏览站点时，所有载波图像都会更改为相对路径。 <％= image_tag image.jpg％>元素可以正常工作，但是图像被加载为CSS背景图像，它们不会出现。这显然仅发生在chrome上（我拥有Versión31.0.1650.57 m）。我做了通过控制台进行跟踪，并将所有图像加载到文档中，因此我去了Inspector并禁用/启用了特定元素的属性 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.

我正在使用带有Turbolink的rails 3.2.14

I'm using rails 3.2.14, with turbolinks:

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

I

有任何建议吗？谢谢

推荐答案

我刚刚发现，如果您对背景图像使用绝对URL，则该错误就会消失。
这就是我在助手中调用载波图像的方式：

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.

这篇关于Turbolinks将载波图像作为CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！