Rails 3.1和图像资产

Lee*_*Lee 156 ruby-on-rails ruby-on-rails-3

我已将我的管理主题的所有图像放在名为admin的文件夹中的assets文件夹中.然后我像正常那样链接到它.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
Run Code Online (Sandbox Code Playgroud)

仅供参考.仅仅为了测试我还没有使用asset_path标签,因为我还没有编译我的资产.

好的,直到我决定更新图像为止.我更换了一些颜色,但在重新加载新样式的图像时没有显示.如果我直接在浏览器中查看图像,它仍然显示旧图像.更进一步,我摧毁了管理员图像文件夹.但它没有破坏所有图像仍在显示.是的,我已经清除了我的缓存并尝试了多个浏览器.

是否存在某种图像缓存?这只是使用pow来为页面提供服务的本地开发.

甚至破坏整个图像文件夹仍然可以提供图像.

我错过了什么吗?

Lee*_*lly 226

在3.1中你只是摆脱了路径的"图像"部分.因此,生成的图像/assets/images/example.png实际上可以在此URL的get请求中访问 -/assets/example.png

因为assets/images文件夹与新的3.1应用程序一起生成,所以这是他们可能希望您遵循的惯例.我认为这是image_tag寻找它的地方,但我还没有测试过.

此外,在RailsConf主题演讲中,我记得D2h说它public folder不应该有更多内容,大多数只是错误页面和图标.

  • 如果两个不同的文件夹包含相同的文件名,会发生什么? (6认同)
  • 不应该是DH2吗? (6认同)

tyb*_*103 98

您需要将css文件的扩展名更改.css.scss.css.scss.erb并执行以下操作:

background-image:url(<%=asset_path "admin/logo.png"%>);
Run Code Online (Sandbox Code Playgroud)

您可能需要进行"硬刷新"以查看更改.OSX浏览器上的CMD + SHIFT + R.

在生产中,请确保

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production
Run Code Online (Sandbox Code Playgroud)

在部署时发生.

  • sass中有新的图像助手:image_url,image_path,...更多信息可以在这里找到:http://edgeguides.rubyonrails.org/asset_pipeline.html不再需要使用erb作为预处理器了 (44认同)
  • 默认情况下,生成的scss文件名为.css.scss,尚未发生床的整理 (2认同)
  • 由于某种原因,image-url对我不起作用,但是asset-url('myimage.png',image)工作得很好.(Rails 3.1) (2认同)

And*_*rew 22

为了它的价值,当我这样做时,我发现css文件中的路径中不应该包含任何文件夹.例如,如果我有app/assets/images/example.png,我把它放在我的CSS文件中......

div.example { background: url('example.png'); }
Run Code Online (Sandbox Code Playgroud)

......然后它以某种方式神奇地起作用.我通过运行rake assets:precompile任务来解决这个问题,该任务只是从所有加载路径中取出所有内容并将其转储到垃圾抽屉文件夹中:public/assets.这很讽刺,IMO ......

在任何情况下,这意味着您不需要放置任何文件夹路径,资产文件夹中的所有内容都将最终存在于一个巨大的目录中.该系统如何解决文件名冲突尚不清楚,您可能需要小心.

令人沮丧的是,对于这一重大改变,并没有更好的文档.

  • 这"神奇地起作用",因为css文件和图像位于同一位置.CSS文件引用与css文件的位置有关. (6认同)
  • 当存在命名冲突时,config.assets.paths数组中显示的第一个路径是所选的文件.这可以通过使用`asset_path()`帮助程序并指定目录来避免. (3认同)

lfl*_*res 16

在rails 4中,您现在可以使用css和sass helper image-url:

div.logo {background-image: image-url("logo.png");}
Run Code Online (Sandbox Code Playgroud)

如果您的背景图像没有显示,请考虑查看您在样式表中引用它们的方式.


Til*_*ilo 10

在CSS或IMG标签中引用图像时,请使用image-name.jpg

而图像确实位于./assets/images/image-name.jpg下