Rails 3.1 i zasoby graficzne

156

Umieściłem wszystkie obrazy mojego motywu administratora w folderze zasobów w folderze o nazwie admin. Następnie link do niego jak normalnie tj.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

FYI. Tylko do testowania nie używam jeszcze tagu asset_path, ponieważ nie skompilowałem swoich zasobów.

Do tej pory dobrze, dopóki nie zdecydowałem się zaktualizować obrazu. Wymieniłem niektóre kolory, ale po ponownym załadowaniu nowy stylizowany obraz nie jest wyświetlany. Jeśli oglądam obraz bezpośrednio w przeglądarce, nadal pokazuje stary obraz. Idąc o krok dalej, zniszczyłem folder z obrazami administratora. Ale nic nie zepsuło, wszystkie obrazy są nadal wyświetlane. I tak, wyczyściłem pamięć podręczną i wypróbowałem na wielu przeglądarkach.

Czy zachodzi jakieś buforowanie obrazu? To tylko lokalny rozwój wykorzystujący pow do obsługi stron.

Nawet niszcząc cały folder obrazów, obrazy nadal są obsługiwane.

Czy coś mi brakuje?

ruby-on-rails ruby-on-rails-3 Zawietrzny
źródło
2
tak nie jest w przypadku wersji 3.1 używającej potoku zasobów. Używałbyś komendy rake asset: prekompilacja, która skompresuje te pliki i przeniesie je do pliku publicznego
Lee
2
Przeniesienie ich do folderu publicznego działało, wszystko trochę dziwne, ponieważ działały dobrze, gdy były obsługiwane z folderu zasobów. Może trzeba będzie poczekać na więcej dokumentów w wersji 3.1.
Lee
3
Rozumiem twoją frustrację. Najwyraźniej kandydaci do wydania nie są dobrze dokumentowani.
tybro0103
1
Zostaw je w zasobach, po prostu nie dodawaj w ogóle ścieżki do folderu. Zobacz moją odpowiedź poniżej.
Andrew,

Odpowiedzi:

226

W 3.1 po prostu pozbywasz się części ścieżki zawierającej obrazy. Tak więc obraz, który żyje w, /assets/images/example.pngbędzie faktycznie dostępny w żądaniu pobierania pod tym adresem URL -/assets/example.png

Ponieważ assets/imagesfolder jest generowany wraz z nową aplikacją 3.1, jest to konwencja, której prawdopodobnie chcą, abyś przestrzegał. Myślę, że tam image_tagbędzie tego szukać, ale jeszcze tego nie testowałem.

Pamiętam również, że podczas prezentacji na RailsConf D2h mówił, że public foldernie powinno to już mieć wiele, głównie strony błędów i favicon.

Lee McAlilly
źródło
Tak, bawiłem się tym działkiem i mają jakiś sposób, aby to ułatwić. Tak, umieszczenie ich w folderze zasobów działa, ale możesz użyć tagu zasobów. Więc czekam, aby zobaczyć, jakie dodatkowe informacje wyjdą.
Lee
1
Dzięki, też mi bardzo pomogło. To jest rodzaj rzeczy, które doprowadzają mnie do szału jako kolesia próbującego nauczyć się Railsów pochodzących z innych frameworków do tworzenia stron internetowych.
jn29098
6
a co by się stało, gdyby dwa różne foldery zawierały tę samą nazwę pliku?
Hady Elsahar
6
Czy nie powinien to być DH2?
Tiago Franco
1
Nie jestem pewien, dlaczego musieli zmienić coś, co już zadziałało.
Tastybrownies
98

Będziesz chciał zmienić rozszerzenie pliku css z .css.scssna .css.scss.erbi wykonaj:

background-image:url(<%=asset_path "admin/logo.png"%>);

Aby zobaczyć zmiany, może być konieczne wykonanie „twardego odświeżania”. CMD + SHIFT + R w przeglądarkach OSX.

Upewnij się, że w produkcji

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

dzieje się po wdrożeniu.

tybro0103
źródło
44
Są nowi pomocnicy obrazu w Sass: image_url, IMAGE_PATH ... Więcej można znaleźć tutaj: edgeguides.rubyonrails.org/asset_pipeline.html ma potrzeby używania erb jako preprocesor już
Martin Wawrusch
1
Wypróbowałem pomocników Sass-Rails (image_url i image-url) do pliku css.scss, ale nie wydaje się, aby był interpretowany. Jakaś wskazówka?
invaino
2
Wygenerowane pliki scss mają domyślnie nazwę .css.scss, jeszcze nie zdarzyło się
srać
2
Z jakiegoś powodu image-url nie działał dla mnie, ale asset-url ('myimage.png', image) działał idealnie. (Rails 3.1)
Elad
1
W przypadku, gdy ktoś zastanawia się nad aktualizacją z 3.0, możesz po prostu zmienić nazwy swoich arkuszy stylów z .cssdo .css.erb(po przeniesieniu ich do, app/assetsaby uzyskać przetwarzanie erb bez sass.
William Denniss
22

Co warto, kiedy to zrobiłem, stwierdziłem, że żaden folder nie powinien znajdować się w ścieżce w pliku css. Na przykład, jeśli mam app/assets/images/example.pngi umieszczam to w moim pliku css ...

div.example { background: url('example.png'); }

... to jakoś magicznie działa. I zdobione to uruchamiając rake assets:precompilezadanie, które właśnie zasysa wszystko z wszystkich ścieżek obciążenia i wysypisk go w folderze śmieci szuflady: public/assets. To ironiczne, IMO ...

W każdym razie oznacza to, że nie musisz umieszczać żadnych ścieżek folderów, wszystko w folderach zasobów będzie mieszkało w jednym ogromnym katalogu. Nie jest jasne, w jaki sposób ten system rozwiązuje konflikty nazw plików, może być konieczne zachowanie ostrożności.

Trochę frustrujące, że nie ma lepszych doktorów, którzy mogliby tak zmienić.

Andrzej
źródło
3
W przypadku konfliktów nazw pierwszą ścieżką, która pojawia się w tablicy config.assets.paths jest wybrany plik. Można tego uniknąć, używając asset_path()pomocnika i określając katalog.
Joseph Ravenwolfe
6
To „magicznie działa”, ponieważ plik css i obrazy znajdują się w tej samej lokalizacji. Odnośniki do plików CSS są względne w stosunku do lokalizacji pliku css.
Bill Leeper
Potok zasobów może być trochę czarną skrzynką, szczególnie dla programistów front-end, ale oferuje wiele wspaniałych funkcji, takich jak brak konieczności martwienia się o ścieżki plików i automatyczne niszczenie pamięci podręcznej.
Miles
16

W rails 4 możesz teraz użyć pomocniczego adresu URL obrazu css i sass: 

div.logo {background-image: image-url("logo.png");}

Jeśli obrazy tła nie są wyświetlane, zastanów się, jak odnosisz się do nich w arkuszach stylów.

lflores
źródło
1
To jest poprawne (dla szyn 4). Zagłosuj na tę odpowiedź!
ahnbizcad
Railsy „pomagają” przez umieszczenie słowa kluczowego url oraz ciągu znaków. Oznacza to, że możesz robić takie rzeczy jak. div.logo {background: image-url("logo.png") no-repeat center;}
Antony Denyer
10

odwołując się do obrazów w CSS lub w tagu IMG, użyj nazwy-obrazu.jpg

podczas gdy obraz naprawdę znajduje się pod ./assets/images/image-name.jpg

Tilo
źródło
Myślę, że to źle, jeśli chodzi o CSS - używanie rails 3.1.0.rc4, gdy używam background: url('sort_asc_disabled.png'), działa dla pliku app / asset / images / sort_asc_disabled.png.
wonderfulthunk
2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Ten railscast (film instruktażowy Rails dotyczący potoku zasobów) pomaga również w wyjaśnieniu ścieżek w potoku zasobów. Okazało się, że jest całkiem przydatny i faktycznie obejrzałem go kilka razy.

Rozwiązanie, które wybrałem, to @Lee McAlilly powyżej, ale ten railscast pomógł mi zrozumieć, dlaczego to działa. Mam nadzieję, że to pomoże!

botbot
źródło
0

Potok aktywów w szynach oferuje metodę na to dokładnie.

Po prostu dodajesz image_path ('nazwa pliku obrazu') do swojego pliku css lub scss, a railsy zajmą się wszystkim. Na przykład:

.logo{ background:url(image_path('admin/logo.png'));

(pamiętaj, że działa to tak samo, jak w widoku .erb i nie używasz w ścieżce „/ asset” ani „/ asset / images”)

Railsy oferują również inne metody pomocnicze, a tutaj jest inna odpowiedź: Jak używać obrazów referencyjnych w Sassie podczas korzystania z Railsów 3.1?

benrugg
źródło
Wiem, że to pytanie ma już kilka lat, ale była to pierwsza strona, którą znalazłem w Google, szukając tego, więc byłoby wspaniale wybrać odpowiedź, aby inni mogli łatwo się do niej odwołać!
benrugg