Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在scss文件rails中添加图像作为图标?_Css_Ruby On Rails - Fatal编程技术网

在scss文件rails中添加图像作为图标?

在scss文件rails中添加图像作为图标?,css,ruby-on-rails,Css,Ruby On Rails,我对rails的前端(通常是后端)比较陌生,我对向css文件中添加图像而不是我的show.haml文件非常迷茫。 以下是我所拥有的: scss文件: @charset "utf-8"; @import "common"; @import "base_grid"; // teacherSearchForm design ================================ #teacherSearchForm{ position: relative; @include siz

我对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'
当前结果:如图所示,高亮显示的部分没有图像。
您必须使用rails助手。在这种情况下

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

您可以在scss文件中使用“背景图像:资产url('assets/images/users/rsz_zipcode.jpg');”资产url返回url('预编译映像路径')