css - 在 scss 文件 rails 中添加图像作为图标？

Question

我对 rails 的前端比较陌生(通常做后端)，而且我对将图像添加到 css 文件并代替我的 show.haml 文件非常迷茫。 这是我所拥有的:

scss文件:

@charset "utf-8";
@import "common";
@import "base_grid";

// teacherSearchForm design ================================
#teacherSearchForm{
  position: relative;
  @include size(100%, 70px);
  margin: 10px 0; padding: 10px 0;
}

.search_option_flipIcon{
  @include size(50px, 50px);
  background: #ddd;
  float: left;
  line-height: 50px;
  text-align: center;
  &.prev{border-radius: 0 25px 25px 0;}
  &.next{border-radius: 25px 0 0 25px;}
}

.search_option_flipIcon:before{
  color: #888;
  font-family: dripicons;
  font-size: 20px;
}

.tutorial:before{
  content: "\e00d";
}
.zip:before{
  @include size(50px,50px);
  display: block;
  background-image: url('assets/images/users/rsz_zipcode.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  line-height: 50px;
  text-align: center;
  &.prev{border-radius: 0 25px 25px 0;}
  &.next{border-radius: 25px 0 0 25px;}
}

show.haml 文件:

#teacherSearchForm
  .search_option_flipIcon.prev.tutorial
  #navigation_menu
    #navigation_menu_window
      .search_option_item.fourN#tutorial
        .dripicons.tutorial.oneN
        .search_option_item_title.tenN 使い方ガイドを見る
      .search_option_item.fourN#zip
        .dripicons.zip.oneN
        .search_option_item_title.tenN
          .fiveN= text_field_tag 'zip1', '', :max => '999',  :placeholder => '012',  :id => 'addr_zip1', :class => 'zip_input'
          .twoN -
          .fiveN= text_field_tag 'zip2', '', :max => '9999', :placeholder => '3456', :id => 'addr_zip2', :class => 'zip_input'
      .search_option_item.fourN#option
        .dripicons.option.oneN
        .search_option_item_title.tenN 検索の条件を追加する
  .search_option_flipIcon.next.option


  #search_form
    = form_tag user_searches_path, :remote => true, :authenticity_token => true, :id => 'search_form' do
      = hidden_field_tag "mode", 't'
      = hidden_field_tag "zip1", '', :id => "hidden_zip1"
      = hidden_field_tag "zip2", '', :id => "hidden_zip2"
      #search_form_inner.full
        = render :partial => "user_searches/days"
        = render :partial => "user_searches/subjects"
        = render :partial => "user_searches/sex"
        %input.sixN.btn{:type => "button", :value => "キャンセル"}
        = submit_tag "検索", :class => 'sixN btn'

当前结果:如图所示，高亮部分没有图像。

Answer 1

您必须使用 Rails 助手。 image_path在这种情况下。

background-image: url(image_path('users/rsz_zipcode.jpg'));