时间戳

首页 > 解决方案 > Rails 6/webpacker ...如何让背景图像在开发和 Heroku 上都可以工作？

ruby-on-rails - Rails 6/webpacker ...如何让背景图像在开发和 Heroku 上都可以工作？

问题描述

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

要将图像附加到body背景，如何style在 application.html.haml 的标签中添加样式声明，该样式声明对本地开发和推送到 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");

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

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

标签： ruby-on-railsbackground-imageasset-pipelinewebpacker

解决方案

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在启动服务器之前运行。

推荐阅读