Рейки 3.1 та зображення активів


156

Я розмістив усі мої зображення для теми мого адміністратора у папці активів у папці під назвою admin. Тоді я посилаюся на це як нормально, тобто.

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

FYI. Тільки для тестування я ще не використовую тег активу-путь, оскільки я не скомпонував свої активи.

Добре все добре поки що я не вирішив оновити зображення. Я замінив кілька кольорів, але при перезавантаженні новий стильовий образ не відображається. Якщо я переглядаю зображення прямо у браузері, воно все ще показує старе зображення. Пройшовши ще крок далі, я знищив папку зображень адміністратора. Але це нічого не порушило, всі зображення все ще відображаються. І так, я очистив кеш і спробував у кількох браузерах.

Чи відбувається якесь кешування зображень? Це лише локальна розробка, яка використовує pow для обслуговування сторінок.

Навіть знищуючи всю папку зображень, зображення все ще подаються.

Я щось пропускаю?


2
це не так з 3.1, використовуючи конвеєр активів. Ви б використовували акти командних граблів: precompile, які будуть стискати ці файли та переміщувати їх у загальнодоступний файл
Лі

2
Добре переміщення їх у загальнодоступну папку працювало, і все трохи дивно, оскільки вони добре працювали, подаючись із папки активів. Можливо, доведеться зачекати більше документів на 3.1.
Лі

3
Я розумію ваше розчарування. Мабуть, кандидати в звільнення не мають документального підтвердження.
tybro0103

1
Залиште їх в активах, просто не включайте шлях до папки. Дивіться мою відповідь нижче.
Андрій

Відповіді:


226

У 3.1 ви просто позбудетесь частини «зображень» шляху. Отже, зображення, яке живе, /assets/images/example.pngбуде насправді доступним у запиті на отримання цього URL-адреси -/assets/example.png

Оскільки assets/imagesпапка генерується разом із новим додатком 3.1, це, можливо, вони хочуть, щоб ви дотримувалися. Я думаю, що це там image_tagбуде шукати, але я цього ще не перевіряв.

Крім того, під час основного повідомлення RailsConf я пам’ятаю, що D2h говорив, що public folderце більше не повинно бути в ньому, в основному це лише сторінки помилок та фавікон.


Так, я зіграв з цим аловом, і вони мають якийсь шлях, щоб зробити це легше. Так, розміщення їх у моїй папці активів працює, але тоді ви можете використовувати тег активів. Тож я чекаю, щоб побачити, що більше інформації вийде.
Лі

1
Спасибі, теж мені дуже допомогли. Це така штука, яка зводить мене з розуму як чувак, який намагається навчитися Рейлів, що виходять з інших рамок веб-розробки.
jn29098

6
і що буде, якби дві різні папки містили одне ім’я файлу?
Hady Elsahar

6
Чи не повинен це бути DH2?
Тіаго Франко

1
Не впевнений, чому їм довелося змінити щось, що вже працювало.
Tastybrownies

98

Ви хочете змінити розширення файлу css з .css.scssна .css.scss.erbі зробити:

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

Можливо, вам доведеться зробити "жорстке оновлення", щоб побачити зміни. CMD + SHIFT + R в браузерах OSX.

У виробництві переконайтесь

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

відбувається при розгортанні.


44
У sass з’являються нові помічники із зображеннями: image_url, image_path, ... Більше можна знайти тут: edgeguides.rubyonrails.org/asset_pipeline.html Більше не потрібно використовувати erb як попередник
Martin Wawrusch

1
Я спробував помічники sass-rails (image_url та image-url) у файл css.scss, але він, здається, не інтерпретується. Якась підказка?
інваїно

2
Згенеровані файли scss за назвою названі .css.scss, жодного лайно в ліжку ще не сталося
Адріан Макнейл

2
З якоїсь причини image-url не працював для мене, але активність-url ('myimage.png', зображення) працювала чудово. (Рейки 3.1)
Elad

1
У випадку, якщо хтось із оновлених версій 3.0 цікавить, ви можете просто перейменувати свої таблиці стилів з .cssна .css.erb(після того, як ви перемістили їх, app/assetsщоб отримати обробку erb без sass.
William Denniss

22

Що це варто, коли я це зробив, я виявив, що жодна папка не повинна містити шлях до файлу css. Наприклад, якщо є app/assets/images/example.png, і я поміщаю це у свій файл css ...

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

... тоді якось це магічно працює. Я зрозумів це, виконавши rake assets:precompileзавдання, яка просто висмоктує всі з усіх шляхів навантаження і скидає його в папку небажаної ящик: public/assets. Це іронічно, ІМО ...

У будь-якому випадку це означає, що вам не потрібно ставити жодні шляхи до папок, все, що знаходиться у папках ваших активів, усе перебуває у величезному каталозі. Як ця система вирішує конфлікти імен файлів, незрозуміло, можливо, вам доведеться бути обережними.

Як неприємно, там немає кращих документів для цієї великої зміни.


3
Коли виникають конфлікти імен, перший шлях, який з’являється в масиві config.assets.paths, - це обраний файл. Цього можна уникнути, скориставшись asset_path()помічником та вказавши каталог.
Джозеф Равенволф

6
Це "магічно працює", оскільки файл css та зображення знаходяться в одному місці. Посилання на файли CSS відносяться до місця розташування файлу css.
Білл Ліпер

Трубопровід активів може бути трохи чорною скринькою, особливо для розробників інтерфейсу, але він пропонує безліч чудових функцій, як, наприклад, не турбуватися про шляхи до файлів та автоматичне завантаження кешу.
Майлз

16

У рейках 4 тепер ви можете використовувати css і sass helper image-url:

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

Якщо фонові зображення не відображаються, розгляньте, як ви посилаєтесь на них у своїх таблицях стилів.


1
Це правильно (для рейок 4). Проголосуйте за цю відповідь!
ahnbizcad

Rails "допомагає вам", ввівши ключове слово, а також рядок. Це означає, що ви можете робити такі речі. div.logo {background: image-url("logo.png") no-repeat center;}
Антоні Деньєр

10

при посиланні на зображення в CSS або в тезі IMG використовуйте image-name.jpg

а зображення дійсно розташоване під ./assets/images/image-name.jpg


Я думаю, що це неправильно, якщо мова йде про CSS - використання рейок 3.1.0.rc4, коли я background: url('sort_asc_disabled.png')його використовую, працює для файлового додатка / активів / зображень / sort_asc_disabled.png.
greatthunk

2

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

Ця рейкова передача (відео з підручника Rails на конвеєрі активів) дуже допомагає пояснити шляхи в конвеєрі активів. Я вважав це досить корисним і насправді переглядав його кілька разів.

Вибране нами рішення - це @Lee McAlilly вище, але ця рейкова передача допомогла мені зрозуміти, чому це працює. Сподіваюся, це допомагає!


0

Трубопровід активів у рейках пропонує метод саме цієї речі.

Ви просто додаєте image_path ("ім'я файлу зображення") у свій файл css чи scss і рейли бере на себе все. Наприклад:

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

(зауважте, що він працює так само, як у перегляді .erb, і ви не використовуєте "/ активи" або "/ активи / зображення" на шляху)

Rails також пропонує інші допоміжні методи, і тут є ще одна відповідь: Як використовувати опорні зображення в Sass при використанні Rails 3.1?


Я знаю, що це питання вже пару років, але це була перша сторінка, яку я знайшов у Google, коли шукав це, тому було б чудово вибрати відповідь, щоб інші могли легко посилатися на це!
benrugg
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.