Rails 4 путь изображения, URL-адрес изображения и URL-адрес ресурса больше не работают в файлах SCSS
Предполагаем ли мы использовать что-то еще помимо image-url
и других в Rails 4? Они возвращают разные значения, которые, похоже, не имеют смысла. Если у меня есть logo.png
в /app/assets/images/logo.png
, и я делаю следующее, это то, что я получаю:
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")
Конечно, ни одна из них не работает, потому что им нужно как минимум /assets
впереди.
ОБНОВЛЕНИЕ: На самом деле, я только что заметил, как мне получить доступ к изображениям в Rails 4? У меня есть изображение в /app/assets/images/logo.png
. Но если я перейду к любому из следующих URL-адресов, я все еще не вижу свое изображение:
http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png
ОБНОВЛЕНИЕ 2. Единственный способ, которым я могу поднять мой logo.png
, - это переместить его в каталог /app/assets/stylesheets
, а затем потянуть вверх:
http://localhost:3000/assets/logo.png
Ответы
Ответ 1
У меня просто была эта проблема.
3 балла, которые, надеюсь, помогут:
- Если вы размещаете изображения в своем каталоге
app/assets/images
, вы должны иметь возможность напрямую вызвать изображение без префикса в пути. то есть. image_url('logo.png')
- В зависимости от того, где вы используете актив, будет зависеть метод. Если вы используете его как свойство
background-image:
, то ваша строка кода должна быть background-image: image-url('logo.png')
. Это работает как для таблиц стилей меньшего размера, так и для sass. Если вы используете его встроенный в представление, вам нужно будет использовать встроенный помощник image_tag
в рельсах для вывода вашего изображения. Еще раз, префикс <%= image_tag 'logo.png' %>
- Наконец, если вы предварительно скомпилируете свои активы, запустите
rake assets:precompile
для создания ваших активов или rake assets:precompile RAILS_ENV=production
для производства, в противном случае ваша производственная среда не будет иметь отпечатки пальцев при загрузке страницы.
Также для этих команд в пункте 3 вам нужно будет префикс их с помощью bundle exec
, если вы запускаете пакет.
Ответ 2
Ваша первая формулировка image_url('logo.png')
верна. Если изображение найдено, оно будет генерировать путь /assets/logo.png
(плюс хэш в процессе производства). Однако, если Rails не может найти изображение, которое вы назвали, оно вернется к /images/logo.png
.
Следующий вопрос: почему Rails не находит ваш образ? Если вы поместите его в app/assets/images/logo.png, вы должны иметь доступ к нему, перейдя в http://localhost:3000/assets/logo.png
.
Если это работает, но ваш CSS не обновляется, вам может потребоваться очистить кеш. Удалите tmp/cache/assets
из каталога проекта и перезапустите сервер (webrick и т.д.).
Если это не удается, вы также можете попробовать просто использовать background-image: url(logo.png);
. Это заставит ваш CSS искать файлы с таким же относительным путем (что в данном случае является/assets).
Ответ 3
У меня была аналогичная проблема, пытаясь добавить фоновое изображение с встроенным css. Нет необходимости указывать папку с изображениями из-за того, как работает синхронизация ресурсов.
Это сработало для меня:
background-image: url('/assets/image.jpg');
Ответ 4
Я только узнал, что с помощью помощника asset_url
вы решаете эту проблему.
asset_url("backgrounds/pattern.png", image)
Ответ 5
Rails 4.0.0 будет выглядеть как изображение с image-url
в той же структуре каталогов с вашим файлом css.
Например, если ваш css в assets/stylesheets/main.css.scss
, image-url('logo.png')
становится url(/assets/logo.png)
.
Если вы переместите свой файл css на assets/stylesheets/cpanel/main.css.scss
, image-url('logo.png')
станет /assets/cpanel/logo.png
.
Если вы хотите использовать изображение непосредственно в каталоге ресурсов/изображений, вы можете использовать asset-url('logo.png')
Ответ 6
для таблиц стилей: URL (asset_path ( 'image.jpg'))