Rails 4图片path,图片url和资产url不再在SCSS文件中工作

我们应该在Rails 4中使用除image-url和其他外的其他内容吗? 他们返回不同的价值观,似乎没有道理。 如果我在/app/assetshttp://img.dovov.comlogo.pnglogo.png ,并且执行以下操作,则得到以下结果:

 image-url("logo.png") -> url("http://img.dovov.comlogo.png") #obviously doesn't work image-path("logo.png") -> "http://img.dovov.comlogo.png" asset-url("logo.png") -> url("/logo.png") 

当然这些工作都没有,因为他们至less需要/assets在前面。

更新 :其实,我只是注意到,如何在Rails 4中访问图像? 我有一个图像在/app/assetshttp://img.dovov.comlogo.png 。 但是,如果我去任何以下的url,我仍然看不到我的形象:

 http://localhost:3000/assets/logo.png http://localhost:3000/assetshttp://img.dovov.comlogo.png http://localhost:3000/logo.png http://localhost:3000http://img.dovov.comlogo.png 

更新2 :我logo.png我的logo.png的唯一方法是将它移动到/app/assets/stylesheets目录,然后拉起来:

 http://localhost:3000/assets/logo.png 

我只是自己有这个问题。 3点,希望可以帮助:

  • 如果你把图片放在你的app/assets/images目录下,那么你应该可以直接调用这个图片,而不需要path中的前缀。 即。 image_url('logo.png')
  • 取决于您使用资产的位置取决于方法。 如果你使用它作为background-image:属性,那么你的代码行应该是background-image: image-url('logo.png') 。 这适用于less和sass样式表。 如果您在视图中使用内联,则需要使用内置的image_tag助手来输出图像。 再一次,没有前缀<%= image_tag 'logo.png' %>
  • 最后,如果您正在预编译您的资产,请运行rake assets:precompile以生成资产或rake assets:precompile RAILS_ENV=production for production,否则,生产环境在加载页面时将没有指纹资产。

同样对于第3点中的那些命令,如果您正在运行捆绑器,则需要使用bundle exec作为前缀。

你的第一个公式image_url('logo.png')是正确的。 如果find图像,它将生成path/assets/logo.png (加上生产中的散列)。 但是,如果Rails无法find您指定的映像,则会回退到http://img.dovov.comlogo.png

接下来的问题是:为什么Rails没有find你的形象? 如果你把它放在app / assets / images / logo.png中,那么你应该可以访问http://localhost:3000/assets/logo.png

如果可行,但你的CSS没有更新,你可能需要清除caching。 从项目目录中删除tmp/cache/assets并重新启动服务器(webrick等)。

如果失败了,你也可以尝试使用background-image: url(logo.png); 这将导致你的CSS寻找具有相同的相对path(在这种情况下是/资产)的文件。

我有一个类似的问题,试图添加内联CSS的背景图像。 由于资产同步的方式,不需要指定图像文件夹。

这对我工作:

 background-image: url('/assets/image.jpg'); 

我刚刚发现,通过使用asset_url帮手,你解决了这个问题。

 asset_url("backgrounds/pattern.png", image) 

Rails 4.0.0将会在你的css文件中查看与image-url在同一目录结构中定义的image-url

例如,如果您在assets/stylesheets/main.css.scssimage-url('logo.png')的CSS变为url(/assets/logo.png)

如果你把你的css文件移动到assets/stylesheets/cpanel/main.css.scssimage-url('logo.png')就会变成/assets/cpanel/logo.png

如果要直接在assets / images目录下使用图像,可以使用asset-url('logo.png')

样式表:url(asset_path('image.jpg'))