Nie wiem dlaczego, ale jedyną rzeczą, która działała dla mnie było użycie asset_path zamiast z image_path , mimo że moje obrazy znajdują się w kataloguassets/images/:

Przykład:

app/assets/images/mypic.png

W Ruby:

asset_path('mypic.png')

Do środka .scss:

url(asset-path('mypic.png'))

UPDATE:

Zorientowałem się - okazuje się, że pomocnicy aktywów pochodzą z sass-rails gem (który zainstalowałem w moim projekt).

W Rails 4 możesz łatwo odwoływać się do obrazu znajdującego się w assets/images/ w Twoich plikach .SCSS w następujący sposób:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

Po uruchomieniu aplikacji w trybie deweloperskim (localhost:3000) powinieneś zobaczyć coś w stylu:

background-image: url("/assets/pretty-background-image.jpg");

W trybie produkcyjnym twoje zasoby będą miały numery pomocnicze pamięci podręcznej:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

Hash jest spowodowany tym, że rurociąg zasobów i serwer optymalizują buforowanie http://guides.rubyonrails.org/asset_pipeline.html

Spróbuj czegoś takiego:

 background-image: url(image_path('check.png'));

Goodluck

W css

background: url("/assets/banner.jpg");

Chociaż oryginalną ścieżką jest / assets / images / banner.jpg, zgodnie z konwencją musisz dodać just / assets / w metodzie url

Żadna z odpowiedzi nie mówi o sposobie, kiedy będę miał .css.erb rozszerzenie, jak odwołać obrazy . Dla mnie pracował zarówno w produkcji i rozwoju jak również:

2.3.1 CSS i ERB

Potoku zasobów automatycznie ocenia ERB . Oznacza to, że jeśli dodasz rozszerzenie erb do zasobu CSS (na przykład application.css.erb), to helpery takie jak asset_path są dostępne w Twoich regułach CSS:

.class { background-image: url(<%= asset_path 'image.png' %>) }

To zapisuje ścieżkę do konkretnego składnika aktywów, do którego się odwołuje. W tym przykładzie sensowne byłoby umieszczenie obrazu w jednej ze ścieżek ładowania zasobu, np. app/assets/images/image.png, do której się tutaj odwołujemy. Jeśli ten obraz jest już dostępny w public/assets jako plik z odciskami palców, to ta ścieżka jest odwoływana.

Jeśli chcesz użyć data URI - metody osadzania danych obrazu bezpośrednio w pliku CSS - możesz użyć helpera asset_data_uri.

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Wstawia poprawnie sformatowany URI danych do Źródło CSS.

zauważ, że znacznik zamykający nie może być w stylu -%>.

Tylko ten fragment mi nie działa:

background-image: url(image_path('transparent_2x2.png'));

Ale zmień nazwę nazwa_pliku.scss do stylename.css.scss mi pomaga.

Odwołując się do rails documents widzimy, że istnieje kilka sposobów łączenia obrazów z css. Wystarczy przejść do sekcji 2.3.2.

Najpierw upewnij się, że plik css ma .rozszerzenie scss jeśli jest to plik sass.

Następnie możesz użyć metody ruby, która jest naprawdę brzydka:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Lub możesz użyć konkretnej formy, która jest ładniejsza:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

Na koniec możesz użyć ogólnej formy:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

CO ZNALAZŁEM PO GODZINACH MUCKING Z TYM:

Działa:

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

Powyższe wypisuje coś w rodzaju: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Zwróć uwagę na prowadzący " / " i znajduje się w cudzysłowach. Zwróć również uwagę na rozszerzenie scss i helper image_path W yourstylesheet.css.scss. Obraz znajduje się w katalogu app/assets / images .

Nie działa:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

Nie działa, nieprawidłowa właściwość:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

Co ciekawe, jeśli używam 'background-image', to nie działa:

background-image: url('picture.png');

Ale tylko "tło", to robi:

background: url('picture.png');

W niektórych przypadkach może być również applier

Logo { background: url ()}

Źródło: http://guides.rubyonrails.org/asset_pipeline.html

Przy użyciu gem 'Sass-rails', w Rails 5, bootstrap 4, zadziałało dla mnie,

W .plik scss:

    background-image: url(asset_path("black_left_arrow.svg"));

W pliku widoku (np.html.slim): {]}

    style=("background-image: url(#{ show_image_path("event_background.png") })");

To powinno cię tam za każdym razem.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

Domyślnie Rails 4 nie będzie obsługiwał Twoich zasobów. Aby włączyć tę funkcjonalność należy wejść do config/application.rb i dodaj ten wiersz:

config.serve_static_assets = true

Https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

W Rails 4 po prostu użyj

.hero { background-image: url("picture.jpg"); }

Możesz dodać do swojego css .rozszerzenie erb. Ej: styl.css.erb

Wtedy można umieścić:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

To mi pomogło:

background: #4C2516 url('imagename.png') repeat-y 0 0;