在 Rails 应用英雄单元中渲染图像

Question

我是 Rails 的新手，正在尝试使用 sass 将图像显示为超大屏幕的背景，就像使用 css 一样，但我不是确定为什么它不起作用。

home.html.erb

<div class="center jumbotron">
  <div class="container">
    <div class="centerfy">
      <h1>AccessOBD</h1>
      <h2>Do Cars Smarter.</h2>

      <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
    </div>
  </div>
</div>

static_pages.scss

.jumbotron {
  margin-bottom: 100px;
  height: 400px;
  font-size: 60px;
  background-image: url(app/assets/images/car.jpg);
}

图像显然在资产管道中，但无法显示图像。我该如何做对？

Answer 1

所以您的问题可能是当使用资产管道时 Rails 会将您的文件移动到 public/assets 并将其重命名为随机生成的名称，例如 car-fe48a0ccb8.jpg。解决这个问题的最简单方法是使用 sass-rails 方法之一，例如 asset-url helper:

background-image: asset-url("car.jpg");

或者图像-url 助手：

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

来源：https://github.com/rails/sass-rails

在 Rails 应用英雄单元中渲染图像

Rendering an image in Rails App hero-unit

css

ruby-on-rails

sass

ruby-on-rails-4