Как ссылаться на изображения в CSS в Rails 4
Есть странная проблема с Rails 4 на Heroku. Когда изображения компилируются, к ним добавляются хэши, но для ссылки на эти файлы из CSS не корректируется правильное имя. Вот что я имею в виду. У меня есть файл с именем logo.png. Тем не менее, когда он появляется на Heroku, он рассматривается как:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
Однако CSS все еще утверждает:
background-image:url("./logo.png");
Результат: изображение не отображается. Кто-нибудь сталкивался с этим? Как это можно решить?
16 ответов
У звездочек вместе с Sass есть несколько отличных помощников, которых вы можете использовать для выполнения работы. Sprockets будет обрабатывать эти помощники только в том случае, если ваши расширения .css.scss или же .css.sass,
Изображение конкретного помощника:
background-image: image-url("logo.png")
Агностический помощник:
background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)
Или, если вы хотите встроить данные изображения в файл CSS:
background-image: asset-data-url("logo.png")
Не знаю почему, но единственное, что мне помогло, - это использовать asset_path вместо image_path, хотя мои изображения находятся в каталоге assets / images /:
Пример:
app/assets/images/mypic.png
В рубине:
asset_path('mypic.png')
В.scss:
url(asset-path('mypic.png'))
ОБНОВИТЬ:
Оказалось, что эти помощники по активам происходят из самоцвета sass-rails (который я установил в своем проекте).
В Rails 4 вы можете ссылаться на изображение, расположенное в assets/images/ в вашем .SCSS файлы легко, как это:
.some-div {
background-image: url(image-path('pretty-background-image.jpg'));
}
При запуске приложения в режиме разработки (localhost:3000), вы должны увидеть что-то вроде:
background-image: url("/assets/pretty-background-image.jpg");
В производственном режиме ваши активы будут иметь номера помощника кэша:
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
Хеш заключается в том, что конвейер ресурсов и сервер оптимизируют кэширование http://guides.rubyonrails.org/asset_pipeline.html
Попробуйте что-то вроде этого:
background-image: url(image_path('check.png'));
Удачи
В css
background: url("/assets/banner.jpg");
хотя исходный путь - /assets/images/banner.jpg, по соглашению вы должны добавить просто / assets / в метод url
Ни один из ответов не говорит о том, когда я буду .css.erb Расширение, как ссылаться на изображения. Для меня работали как в производстве, так и в разработке:
Конвейер активов автоматически оценивает ERB. Это означает, что если вы добавите расширение erb к ресурсу CSS (например, application.css.erb), то помощники нравятся asset_path доступны в ваших правилах CSS:
.class { background-image: url(<%= asset_path 'image.png' %>) }
Это записывает путь к конкретному активу, на который ссылаются. В этом примере было бы целесообразно иметь изображение в одном из путей загрузки ресурсов, таких как app/assets/images/image.png, который будет ссылаться здесь. Если это изображение уже доступно в public/assets как файл с отпечатками пальцев, то на этот путь ссылаются.
Если вы хотите использовать URI данных - метод встраивания данных изображения непосредственно в файл CSS - вы можете использовать asset_data_uri помощник.
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
Это вставит правильно отформатированный URI данных в источник CSS.
Обратите внимание, что закрывающий тег не может иметь стиль -%>.
Только этот фрагмент не работает для меня:
background-image: url(image_path('transparent_2x2.png'));
Но переименование stylename.scss в stylename.css.scss помогает мне.
Обращаясь к документам Rails, мы видим, что существует несколько способов ссылки на изображения из CSS. Просто перейдите к разделу 2.3.2.
Во-первых, убедитесь, что ваш файл CSS имеет расширение.scss, если это файл sass.
Далее вы можете использовать метод ruby, который действительно ужасен:
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
Или вы можете использовать конкретную форму, которая лучше:
image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"
Наконец, вы можете использовать общую форму:
asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"
ЧТО Я НАШЕЛ ПОСЛЕ ЧАСОВ МУЖЕНИЯ С ЭТИМ:
РАБОТАЕТ:
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
Выше приведено что-то вроде: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"
Обратите внимание на начальный "/", и он в кавычках. Также обратите внимание на расширение scss и помощник image_path в yourstylesheet.css.scss. Изображение находится в каталоге app/assets/images.
Не работает:
background: url(image_path('transparent_2x2.png') repeat center center fixed;
не работает, недопустимое свойство:
background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;
Моим последним средством было поместить их в мое общедоступное ведро s3 и загрузить оттуда, но наконец-то все заработало.
Интересно, что если я использую 'background-image', он не работает:
background-image: url('picture.png');
Но просто "фон", это делает:
background: url('picture.png');
Вы можете добавить к вашему расширению CSS.erb. Ej: style.css.erb
Тогда вы можете положить:
background: url(<%= asset_path 'logo.png' %>) no-repeat;
При использовании gem 'sass-rails' в Rails 5, bootstrap 4 у меня работало следующее:
в файле.scss:
background-image: url(asset_path("black_left_arrow.svg"));
в файле просмотра (например,.html.slim):
style=("background-image: url(#{ show_image_path("event_background.png") })");
В некоторых случаях может также применяться следующее
logo {background: url (<% = asset_data_uri 'logo.png'%>)}
Это сработало для меня:
background: #4C2516 url('imagename.png') repeat-y 0 0;
В Rails 4 просто используйте
.hero {
background-image: url("picture.jpg");
}
По умолчанию Rails 4 не будет обслуживать ваши активы. Чтобы включить эту функцию, вам нужно зайти в config/application.rb и добавить эту строку:
config.serve_static_assets = true
https://devcenter.heroku.com/articles/rails-4-asset-pipeline
Это должно привести вас туда каждый раз.
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);