Rails 6/webpacker...如何让背景图片在开发中和 Heroku 上工作？

Question

在 Rails 6 应用程序中，我在 app/assets/images/bgs/abc.jpg

中有一个图像文件

要将该图像附加到 body 背景，我怎样才能在 application.html.haml 中的 style 标签中声明样式，使其与 相同[=29] =] 本地开发以及何时推送到 heroku？

在开发中工作，但不是 Heroku，因为我想资产处理差异：

#application.html.haml
%style
  body::after {
  content: "";
  background: url("/assets/bgs/abc.jpg");  ### WORKS DEVT ONLY ###
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.12;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  background-attachment: fixed;
  z-index: -1;   
  }

我知道我应该使用 asset_path 但 none 这些工作正在开发中：

background: asset_path("/bgs/abc.jpg");
background: asset_path("bgs/abc.jpg");
background: asset_url("/bgs/abc.jpg");
background: asset_url("bgs/abc.jpg");

那里有大量不一致的信息，有些情况下说使用 asset-url 或 asset-path，有些情况下说 asset_url 或 asset_path，甚至一些案例说使用 url(~filename.jpg)，有些说使用背景：有些说背景图像。

有没有一种简单的方法可以在开发和 Heroku 上使用具有完全相同代码的背景图像？

Answer 1

Rails 在生产模式下将预编译资产，以便资产文件夹（和子文件夹）中的所有图像都将被预编译并保存为 public 文件夹中的 image name-fingeprint，例如：我有一张图片 assets/images/bgs/pragmatic_programmer.jpg，然后在 运行 命令 rake assets:precompile 之后，这张图片将变成 /public/assets/bgs/pragmatic_programmer-9aa8a13ac97f205fe891bee7c42c6e711f997186d8975d5a4106ca2fe53ccc61.jpg。

由于图像路径更改，导致您的应用在开发模式下工作而不在生产模式下工作，您可以通过 ActionView::Helpers::AssetTagHelper#image_path 访问新编译的图像，如下所示

#application.html.haml
%style
  body::after {
  content: "";
  background: url(= image_path("bgs/abc.jpg"));
  ...
}

您可以在开发模式下进行测试，只需 运行 rake assets:precompile 在启动服务器之前。

Answer 2

样式定义的答案是：

背景：url( asset_path("bgs/abc.jpg") );

对开发和生产都有效。