在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'));

Answer 2

您可以在scss文件中使用＆background-image：asset-url（＆＃39; assets / images / users / rsz_zipcode.jpg＆＃39;）;＆＃39; asset-url return url（＆＃39;预编译图片路径＆＃39;）