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

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

在 Rails 6 应用程序中，我在 app/assets/images/bgs/abc.jpg 中有一个图像文件

要将该图像附加到 body 背景，我如何在 application.html.haml 的 style 标记中声明样式声明，使其与 相同 用于 > 本地开发和何时推送到 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 但这些都没有在开发中工作：

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

存在大量不一致的信息，有些情况说使用资产网址或资产路径，有些情况说使用资产网址或资产路径，甚至有些情况说使用 url(~filename.jpg)，有些情况说使用背景：有人说背景图片。

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

解决方法

生产模式下的 Rails 将预编译资产，以便资产文件夹（和子文件夹）上的所有图像都将被预编译并保存为公共文件夹中的 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。

,

样式定义的答案是：

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

适用于开发和生产。