Не удается отобразить CSS bg в Rails

#html #css #ruby-on-rails #heroku

#HTML #css #ruby-on-rails #heroku

Вопрос:

Работаю над индексной страницей моего приложения, и по какой-то причине добавленное мной bg-изображение не отображается. Однако все остальные файлы изображений, которые я вызываю, делают это (однако не вызываются в CSS, как этот)

Это отлично проявляется в разработке, но не в производстве.

Я получаю следующую ошибку в своих журналах heroku:

 ActionController::RoutingError (No route matches [GET] "/assets/ctabackground.png"):
  

Мой CSS:

 #cta {
 text-align:center;
 height:600px;
 width:100%;
 background:url('ctabackground.png') no-repeat $light-green;
 h1, h2 {
 color:#fff;
}
 h2 {
  letter-spacing:2px;
  font-weight:300;
 }
}
  

файл находится в assets/images/ как ctabackground.png

В чем здесь проблема?

Ответ №1:

Вам нужно использовать rails asset_path для правильного URL. Попробуйте:

 background-image: url(<%= asset_path 'ctabackground.png' %>) no-repeat $light-green;
  

Обновить:

Поскольку вы используете sass, вы можете использовать rails image-url helper

 background-image: image-url('ctabackground.png') no-repeat $light-green;
  

Комментарии:

1. да, я тоже думал в этом духе, единственная проблема в том, что он находится в моем файле .css.scss, поэтому он не запускает код rails.

2. @user2755537 о, но в производственных rails предварительно компилируются все ваши ресурсы, и из содержимого генерируется MD5, поэтому у вас не будет доступа к путям типа assets/images/image.png вот почему мы используем asset_path для создания правильных URL-адресов. Если вы не хотите создавать из него erb-файл, я бы рекомендовал использовать image_tag вместо вашего изображения в качестве фона

3. не знал этого! затем я узнал кое-что новое 🙂 однако текущую проблему по-прежнему не удалось устранить.

4. @user2755537 как вы его используете сейчас? и оформить заказ guides.rubyonrails.org/asset_pipeline.html#in-production

5. Когда я ссылаюсь на изображения из моего файла hmtl.erb, я просто делаю <%= image_tag ‘path’ %>