Rails 4 image-path, image-url i asset-url nie działają już w plikach SCSS

99

Czy powinniśmy używać czegoś innego oprócz image-urli innych w Rails 4? Zwracają różne wartości, które wydają się nie mieć sensu. Jeśli mam logo.pngsię /app/assets/images/logo.pngi wykonaj następujące czynności, to jest to, co mam:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Oczywiście żadna z nich nie działa, ponieważ potrzebują przynajmniej /assetsz przodu.

AKTUALIZACJA : Właściwie właśnie zauważyłem, jak uzyskać dostęp do obrazów w Rails 4? Mam zdjęcie pod adresem/app/assets/images/logo.png. Ale jeśli przejdę pod którykolwiek z poniższych adresów URL, nadal nie widzę swojego obrazu:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

AKTUALIZACJA 2 : Jedyny sposób, w jaki mogę wywołać mój,logo.pngto przeniesienie go do/app/assets/stylesheetskatalogu, a następnie wyciągnięcie:

http://localhost:3000/assets/logo.png

ruby-on-rails asset-pipeline ruby-on-rails-4

— w.
źródło

Spróbuj tego:asset_path("logo.png", image)

— Marcelo De Polli

@depa - to po prostu przekonwertowane na „/logo.png”, co nie wyświetla mojego obrazu.

— godz.

3

Czy używasz tego pomocnika w .csspliku czy w .css.scsspliku?

— Marcelo De Polli

@depa - nie używam żadnego pomocnika. Myślę, że jest to większy problem dotyczący zasobów, które po prostu nie działają dla mojego folderu obrazów

— o.

1

@depa - och, rozumiem, o co pytasz. Znajduje się w .css.scsspliku

— pod adresem.

113

Po prostu sam miałem ten problem. 3 punkty, które miejmy nadzieję pomogą:

Jeśli umieścisz obrazy w swoim app/assets/imageskatalogu, powinieneś być w stanie wywołać obraz bezpośrednio bez prefiksu w ścieżce. to znaczy.image_url('logo.png')
W zależności od tego, gdzie używasz zasobu, będzie zależeć od metody. Jeśli używasz go jako background-image:właściwości, Twój wiersz kodu powinien być background-image: image-url('logo.png'). Działa to zarówno w przypadku arkuszy stylów less i sass. Jeśli używasz go w widoku, będziesz musiał użyć wbudowanego image_tagpomocnika w railsach, aby wyświetlić obraz. Po raz kolejny bez przedrostków<%= image_tag 'logo.png' %>
Wreszcie, jeśli prekompilujesz swoje zasoby, uruchamiasz je w rake assets:precompilecelu wygenerowania zasobów lub rake assets:precompile RAILS_ENV=productiondo produkcji, w przeciwnym razie Twoje środowisko produkcyjne nie będzie miało zasobów z odciskami palców podczas ładowania strony.

Również dla tych poleceń w punkcie 3 będziesz musiał poprzedzić je prefiksem, bundle execjeśli używasz bundlera.

— cdaloisio
źródło

1

Kolejnym punktem jest przeczytanie dokumentacji guide.rubyonrails.org/asset_pipeline.html . Czy możesz również zobaczyć w Web Developer Debug swojej przeglądarki, czy obrazy są ładowane?

— H.Rabiee

3

Teraz tak piszesz odpowiedź. Każdy scenariusz. Przewidywanie „a co, jeśli”, żadnych luźnych końców. Znak kogoś, kto „widział walkę” (naprawdę rozwiązał problem).

— ahnbizcad

Kilkakrotnie ugryzł mnie brakujący RAILS_ENV = produkcja.

— Sixty4Bit

62

Twoje pierwsze sformułowanie image_url('logo.png')jest poprawne. Jeśli obraz zostanie znaleziony, wygeneruje ścieżkę /assets/logo.png(plus hash w produkcji). Jeśli jednak Rails nie mogą znaleźć obrazu, który podałeś, wrócą do /images/logo.png.

Następne pytanie brzmi: dlaczego Railsy nie znajdują Twojego obrazu? Jeśli umieścisz go w app / asset / images / logo.png, powinieneś mieć do niego dostęp, przechodząc do http://localhost:3000/assets/logo.png.

Jeśli to działa, ale CSS się nie aktualizuje, może być konieczne wyczyszczenie pamięci podręcznej. Usuń tmp/cache/assetsz katalogu projektu i zrestartuj serwer (webrick itp.).

Jeśli to się nie powiedzie, możesz również spróbować po prostu użyć background-image: url(logo.png);To spowoduje, że twój CSS będzie szukał plików z tą samą ścieżką względną (która w tym przypadku to / asset).

— Nick Urban
źródło

2

Aby wskoczyć na to, ugryzł mnie podwójne cudzysłowy na ścieżce obrazu zamiast pojedynczych cudzysłowów. Często używasz pojedynczych cudzysłowów z pomocnikami zasobów w plikach css / scss.

— d_ethier

Otrzymuję „niezdefiniowaną zmienną lokalną lub metodę„ obraz ”

— Muhammad Umer

Czy możliwe jest przypadkowe wstawienie spacji przed słowem obraz?

— Nick Urban

10

Właśnie się dowiedziałem, że używając asset_urlpomocnika rozwiązujesz ten problem.

asset_url("backgrounds/pattern.png", image)

— Leftis
źródło

Mam undefined local variable or method 'image'błąd.

— Penguin

Może coś się zmieniło na szynach, ta odpowiedź jest stara! Możesz spróbowaćasset_path("<your_path>", type: :image)

— Leftis

8

Miałem podobny problem, próbując dodać obraz tła z wbudowanym css. Nie ma potrzeby określania folderu obrazów ze względu na sposób działania synchronizacji zasobów.

To zadziałało dla mnie:

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

— ykwx
źródło

Dzięki, robiłem assets/img.jpglub ../assets/img.jpgco oczywiście nie działa w żadnym katalogu. /assets/img.jpgrobi. TY

— ElliotM

5

Rails 4.0.0 będą wyglądać na obraz zdefiniowany image-urlw tej samej strukturze katalogów, co plik css.

Na przykład, jeśli twój css w assets/stylesheets/main.css.scss, stanie image-url('logo.png')się url(/assets/logo.png).

Jeśli przeniesiesz plik css do assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')staje się /assets/cpanel/logo.png.

Jeśli chcesz użyć obrazu bezpośrednio w katalogu asset / images, możesz użyć asset-url('logo.png')

— kuntoaji
źródło

5

dla arkuszy stylów: url (asset_path ('image.jpg'))

— user2586863
źródło

3

Jaka jest główna różnica między url(asset_path('image.jpg'), url('image.jpg')i image-url('image.jpg')? Pracuję z Railsami 5.0.0.1 i url()działa dobrze w plikach SCSS oraz w plikach html.erb , których używam, asset_path()więc chciałbym wiedzieć, jak to zrobić. Z góry dziękuję.

— alexventuraio

asset_pathdodaj do pliku obrazu załącznik z podsumowaniem. W rzeczywistości jest przeznaczony do produkcji, po każdym wdrożeniu dodatek z podsumowaniem zostanie zmieniony, a przeglądarka użytkownika pobierze nową wersję obrazów.

— Alex Kojin