Rails 4-шлях зображення, URL-зображення та URL-адреса активів більше не працюють у файлах SCSS

99

Чи слід використовувати щось інше окрім 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

ruby-on-rails asset-pipeline ruby-on-rails-4

— у.
джерело

Спробуйте так:asset_path("logo.png", image)

— Marcelo De Polli

@depa - це просто перетворене на "/logo.png", яке не відображає моє зображення.

— у.

3

Ви використовуєте цього помічника всередині .cssфайлу чи у .css.scssфайлі?

— Марсело Де Поллі

@depa - не використовує жодного помічника. Я думаю, що це більша проблема активів, які просто не працюють для моєї папки зображень

— на.

1

@depa - о, я бачу, що ти просиш. Це всередині .css.scssфайлу

— у.

113

Я просто мав це питання сам. 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якщо ви працюєте в комплекті.

— cdaloisio
джерело

1

Ще один момент - прочитати документацію guides.rubyonrails.org/asset_pipeline.html . Ви також можете бачити у налагодженні веб-розробника веб-переглядача, якщо зображення завантажуються?

— H.Rabiee

3

Тепер так ви пишете відповідь. Кожен сценарій. Прогнозуючи "що якщо", жодних вільних кінців немає. Позначка того, хто «бачив бій» (справді спрацював через проблему).

— ahnbizcad

Мене кілька разів покусав відсутній RAILS_ENV = виробництво.

— Sixty4Bit

62

Ваша перша формулювання image_url('logo.png'), є правильним. Якщо зображення знайдено, воно генерує шлях /assets/logo.png(плюс хеш у виробництві). Однак якщо Rails не зможе знайти обране вами зображення, воно повернеться до /images/logo.png.

Наступне питання: чому Rails не знайде ваше зображення? Якщо ви помістите його в додаток / активи / образи / logo.png, вам слід мати доступ до нього, перейшовши на сторінку http://localhost:3000/assets/logo.png.

Якщо це працює, але ваш CSS не оновлюється, можливо, вам доведеться очистити кеш. Видаліть tmp/cache/assetsзі свого каталогу проектів і перезапустіть сервер (webrick тощо).

Якщо це не вдається, ви також можете спробувати просто скористатися background-image: url(logo.png);Це призведе до того, що ваш CSS шукатиме файли з однаковим відносним шляхом (що в цьому випадку є / активами).

— Нік Урбан
джерело

2

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

— d_ethier

я отримую "невизначену локальну змінну або метод` зображення ""

— Мухаммед Умер

Чи можливо ви випадково поставите пробіл перед зображенням слова?

— Нік Урбан

10

Я щойно з’ясував, що за допомогою asset_urlпомічника ви вирішите цю проблему.

asset_url("backgrounds/pattern.png", image)

— Ліві
джерело

Я отримав undefined local variable or method 'image'помилку.

— Пінгвін

Можливо, щось змінилось на рейках, ця відповідь стара! Можна спробуватиasset_path("<your_path>", type: :image)

— Leftis

8

У мене була подібна проблема, намагаючись додати фонове зображення з вбудованим css. Не потрібно вказувати папку зображень через те, як працює синхронізація активів.

Це працювало для мене:

background-image: url('/assets/image.jpg');

— ykwx
джерело

Дякую, я це робив assets/img.jpgабо, ../assets/img.jpgочевидно, не працює в жодному каталозі. /assets/img.jpgробить. TY

— ElliotM

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

— кунтоаджі
джерело

5

для таблиць стилів: url (resource_path ('image.jpg'))

— користувач2586863
джерело

3

У чому головна відмінність між url(asset_path('image.jpg'), url('image.jpg')і image-url('image.jpg')? Я працюю з Rails 5.0.0.1 і url()прекрасно працює у файлах SCSS та у файлах html.erb, які я використовую, asset_path()тому я хотів би знати правильний шлях. Заздалегідь спасибі.

— alexventuraio

asset_pathдодати у файл зображення дайджест. Це фактично для виробництва, після кожного розгортання дайджест додатка буде змінено, і браузер користувача завантажить нову версію зображень.

— Олексій Кожин