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'))