如何在子文件夹中的Rails 4中的* .css.scss文件中呈现图像?

时间:2015-09-26 00:53:48

标签: ruby-on-rails ruby ruby-on-rails-4 asset-pipeline assets

图片位于assets/images/new_design/new_img1.png

new_layout.css.scss文件中,我有以下一行:

.top_bg {
  background-image: url("/assets/new_design/new_img1.png");
  ...
}

但图像未呈现。我也试过了:

  1. background-image: image-url("/assets/new_design/new_img1.png");
  2. background-image: url("/assets/new_design/new_img1.png");
  3. background-image: url("new_design/new_img1.png");
  4. 但这些都没有奏效。在localhost上,我能够使用第三种方法成功渲染它,但我不知道如何在生产服务器上进行渲染。

    感谢任何帮助,谢谢!

2 个答案:

答案 0 :(得分:0)

放置在/ assets /文件夹中的图像使用资产管道进入Rails。因此,如果您想要访问它们,您需要将.erb附加到您的文件中,这样您就可以将一些红宝石放入您的css文件中,这些文件将由rails评估。

  

将new_layout.css.scss更改为new_layout.css.scss.erb

现在您已经拥有了可以运行帮助程序的文件,请使用图像帮助程序为您的图像生成路径:

background-image: url(<%= asset_path 'new_design/new_img1.png' %>);

应该有效。这利用资产路径助手,在资产文件夹中查找适当的资源并创建直接链接。

如果您希望在没有管道的情况下直接访问图像,可以将它们放在应用程序的公共文件夹中,但之后就会失去使用资产管道的价值。

另外,对于生产......如果您的流程在启动过程中未包含此步骤,则可能需要在推送到生产之前预编译您的资产。

运行以下命令预编译资产:

rake assets:precompile

答案 1 :(得分:0)

之前我遇到过同样的问题,并且能够摆脱我的形象

app/assets/images

目录,并能够使用

调用图像

background-image: image-url("project-image.jpg");

顺便说一下。在生产模式中,资产默认由资产管道预编译。 application.jsapplication.css资产清单中包含的所有文件都会被压缩并连接到位于public/assets文件夹中的同名文件中。

此外,要包含其他资源,您可以使用config.assets.precompile配置设置指定它们。 ```config.assets.precompile + =%w(some-name.css)

相关问题