Dziwny problem z Railsami 4 na Heroku. Podczas kompilacji obrazów dodawane są do nich skróty, ale odwołanie do tych plików z CSS nie ma poprawnej nazwy. Oto co mam na myśli. Mam plik o nazwie logo.png. Jednak gdy pojawia się na heroku, jest postrzegane jako:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Jednak CSS nadal stwierdza:

background-image:url("./logo.png");

Wynik: obraz nie wyświetla się. Ktoś na to wpadł? Jak można to rozwiązać?

Koła zębate wraz z Sassem mają sprytnych pomocników, których możesz użyć do wykonania zadania. Zębatki będzie jedynie przetwarzać te pomocników jeśli rozszerzenia plików stylów są albo .css.scssalbo .css.sass.

Pomocnik specyficzny dla obrazu:

background-image: image-url("logo.png")

Pomocnik agnostyczny:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Lub jeśli chcesz osadzić dane obrazu w pliku css:

background-image: asset-data-url("logo.png")

Nie wiem dlaczego, ale jedyną rzeczą, która pracowała dla mnie było za pomocą asset_path zamiast z IMAGE_PATH , chociaż moje obrazy są pod assets / images / katalogu:

Przykład:

app/assets/images/mypic.png

W Ruby:

asset_path('mypic.png')

W .scss:

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

AKTUALIZACJA:

Zorientowałem się, że okazuje się, że ci pomocnicy zasobów pochodzą z klejnotu sass-rails (który zainstalowałem w moim projekcie).

W Rails 4 możesz łatwo odwoływać się do obrazu znajdującego się assets/images/w twoich .SCSSplikach:

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

Po uruchomieniu aplikacji w trybie programowania ( localhost:3000) powinieneś zobaczyć coś takiego:

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");

Haszowanie jest spowodowane tym, że potok zasobów i serwer Optymalizuj buforowanie http://guides.rubyonrails.org/asset_pipeline.html

Wypróbuj coś takiego:

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

Powodzenia

W css

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

chociaż oryginalna ścieżka to /assets/images/banner.jpg, zgodnie z konwencją musisz dodać po prostu / asset / w metodzie url

Żadna z odpowiedzi nie mówi o tym, w jaki sposób będę mieć .css.erbrozszerzenie, jak odwoływać się do obrazów . Dla mnie pracował zarówno w produkcji, jak i rozwoju :

2.3.1 CSS i ERB

Potok zasobów automatycznie ocenia ERB . Oznacza to, że jeśli dodasz rozszerzenie erb do zasobu CSS (na przykład application.css.erb), wtedy pomocnicy tacy asset_pathsą dostępni w twoich regułach CSS:

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

Spowoduje to zapisanie ścieżki do konkretnego zasobu, do którego następuje odwołanie. W tym przykładzie sensowne byłoby posiadanie obrazu w jednej ze ścieżek ładowania zasobów, na przykład takiej app/assets/images/image.png, do której można by się tutaj odwoływać. Jeśli ten obraz jest już dostępny public/assetsjako plik odcisków palców, wówczas ścieżka jest przywoływana.

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

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

To wstawia poprawnie sformatowany identyfikator URI danych do źródła CSS.

Pamiętaj, że tag zamykający nie może mieć stylu -%>.

Tylko ten fragment kodu nie działa dla mnie:

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

Ale zmiana nazwy stylename.scss na stylename.css.scss pomaga mi.

Odwołując się do dokumentów Railsów , widzimy, że istnieje kilka sposobów na linkowanie do obrazów z css. Wystarczy przejść do sekcji 2.3.2.

Po pierwsze, 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ć konkretnego formularza, który jest ładniejszy:

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

Na koniec możesz użyć formularza ogólnego:

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

CO ZNALAZŁEM PO GODZINACH MUCKINGU TO:

PRACUJE :

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

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

Powyższe dane wyjściowe wyglądają następująco: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Zwróć uwagę na wiodące „/” i jest ono w cudzysłowie . Zwróć również uwagę na rozszerzenie scss i pomocnika image_path w pliku yourstylesheet.css.scss. Obraz znajduje się w katalogu app / asset / 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;

Moją ostatnią deską ratunku było umieszczenie ich w moim publicznym wiaderku s3 i załadowanie stamtąd, ale w końcu coś się zaczęło.

Co ciekawe, jeśli użyję „obrazu tła”, to nie działa:

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

Ale po prostu „tło”:

background: url('picture.png');

W niektórych przypadkach mogą być również stosowane następujące aplikacje

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

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

Podczas korzystania z klejnotów „sass-rails” w Rails 5, bootstrap 4, działało dla mnie:

w pliku .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 zabrać za każdym razem.

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

Domyślnie Rails 4 nie obsługuje twoich zasobów. Aby włączyć tę funkcję, musisz przejść do config / application.rb i dodać 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 rozszerzenia css .erb. Ej: style.css.erb

Następnie możesz umieścić:

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

To działało dla mnie:

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