Rails 3.1 и Image Assets

156

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

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

FYI. Просто для тестирования я пока не использую тег asset_path, так как я не скомпилировал мои ресурсы.

Хорошо, пока все хорошо, пока я не решил обновить изображение. Я заменил некоторые цвета, но при перезагрузке новое стилизованное изображение не отображается. Если я смотрю изображение прямо в браузере, оно все еще показывает старое изображение. Пройдя еще один шаг, я уничтожил папку с изображениями администратора. Но это ничего не сломало, все изображения все еще отображаются. И да, я очистил свой кеш и пробовал на нескольких браузерах.

Есть ли какое-то кэширование изображений? Это просто локальная разработка, использующая Pow для обслуживания страниц.

Даже уничтожая всю папку изображений, изображения все еще обслуживаются.

Я что-то упускаю?

ruby-on-rails ruby-on-rails-3 подветренный
источник
2
это не относится к 3.1 с использованием конвейера ресурсов. Вы должны использовать команду rake assets: precompile, которая сожмет эти файлы и переместит их в открытый файл
Lee
2
Перенос их в общую папку работал, все немного странно, так как они работали нормально из папки ресурсов. Возможно, придется ждать больше документов на 3.1.
Ли
3
Я понимаю ваше разочарование. Очевидно, кандидаты на освобождение не очень хорошо документированы.
tybro0103
1
Оставьте их в активах, просто не указывайте путь к папке. Смотрите мой ответ ниже.
Андрей

Ответы:

226

В версии 3.1 вы просто избавляетесь от части «образов» пути. Таким образом, изображение, которое живет в /assets/images/example.pngдействительности, будет доступно в запросе get по этому URL -/assets/example.png

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

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

Ли Макалли
источник
Да, я играл с этим распределением, и у них есть какой-то способ сделать это проще. Да, размещение их в моей папке ресурсов работает, но тогда вы можете использовать тег активов. Так что я жду, чтобы увидеть, что больше информации выходит.
Ли
1
Спасибо, мне тоже очень помогло. Это тот тип вещей, который сводит меня с ума, чувак, пытающийся изучать Rails из других сред веб-разработки.
jn29098
6
и что будет, если две разные папки будут содержать одно и то же имя файла?
Хади Эльсахар
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

происходит при развертывании.

tybro0103
источник
44
В sass есть новые помощники по изображениям: image_url, image_path, ... Больше можно найти здесь: edgeguides.rubyonrails.org/asset_pipeline.html Больше не нужно использовать erb в качестве препроцессора
Мартин Вавруш,
1
Я пробовал помощников sass-rails (image_url и image-url) в файл css.scss, но, похоже, это не интерпретируется. Любая подсказка?
invaino
2
Сгенерированные scss-файлы по умолчанию называются .css.scss, пока не было никаких проблем,
Adrian Macneil,
2
Почему-то image-url у меня не работал, но asset-url ('myimage.png', image) работал отлично. (Рельсы 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

В rails 4 теперь можно использовать URL-адрес помощника css и sass: 

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

Если фоновые изображения не отображаются, подумайте о том, как вы ссылаетесь на них в таблицах стилей.

lflores
источник
1
Это правильно (для рельсов 4). Проголосуй за этот ответ!
ahnbizcad
Rails «помогает вам», вводя ключевое слово url и строку. Это означает, что вы можете делать такие вещи, как. div.logo {background: image-url("logo.png") no-repeat center;}
Энтони Дениер,
10

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

в то время как изображение действительно находится в ./assets/images/image-name.jpg

Тило
источник
Я думаю, что это неправильно, когда дело доходит до CSS - использование rails 3.1.0.rc4, когда я background: url('sort_asc_disabled.png')его использую, работает для файла app / assets / images / sort_asc_disabled.png.
чудесный день
2

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

Этот Railscast (Rails Tutorial видео по конвейеру активов) также очень помогает объяснить пути в конвейере активов. Я нашел это довольно полезным, и фактически смотрел это несколько раз.

Решение, которое я выбрал, это @Lee McAlilly выше, но этот Railscast помог мне понять, почему это работает. Надеюсь, поможет!

botbot
источник
0

Трубопровод активов в рельсах предлагает метод для этой точной вещи.

Вы просто добавляете image_path ('имя файла изображения') в свой файл css или scss, и rails позаботится обо всем. Например:

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

(обратите внимание, что он работает так же, как в представлении .erb, и вы не используете "/ assets" или "/ assets / images" в пути)

Rails также предлагает другие вспомогательные методы, и здесь есть другой ответ: как использовать опорные изображения в Sass при использовании Rails 3.1?

benrugg
источник
Я знаю, что этому вопросу уже пару лет, но это была первая страница, которую я нашел в Google при поиске, поэтому было бы здорово выбрать ответ, чтобы другие могли легко сослаться на это!
Бенругг