Hinzufügen eines Bildes als Symbol in einer scss-Datei Schienen?

Question

Ich bin relativ neu am Front-End von Schienen (normalerweise tun Back-End), und ich bin sehr verloren beim Hinzufügen von Bildern zu einer CSS-Datei und stattdessen meine Show.haml-Datei. Hier ist, was ich habe:

SCSS Datei:

@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 Datei:

#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' 

Aktuelles Ergebnis: Wie zu sehen ist, das markierte Teil kein Bild hat.

Answer 1

Sie müssen die Schienen Helfer verwenden. image_path in diesem Fall.

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

Answer 2

Sie in Ihrem SCSS Datei 'background-image: Asset-URL verwenden könnte (' assets/images/users/rsz_zipcode.jpg ');' Asset-URL-URL ('vorkompilierter Bildpfad')