railsでbootstapのジャンボトロンを背景画像にしたい。

Question

現在簡単な、CRUD処理のアプリを作成し、練習をしています。
bootstrapを適用させるところまではできました。
そこでジャンボトロンを使って画像を表示させたくググって調べているのですが、解決できずかなり時間が経過してしまいました。

imdex.html.erbか、asset~で保管？するのような情報も目にしましたが、画像イメージはどこで編集してあげればいいかがわからないです。
"プリコンパイル"は"アセットパイプライン"を使っています。

一緒にみてもらえないでしょうか。

以下が現在の出力結果とエディタの内容です。
説明](88b095505b48284b37716cc507ade102.png)

index.html.erb

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>書籍一覧</h1>
    <%= link_to '新規登録',new_book_path, class: "btn-sm btn-primary" %>
  </div>
</div>
<table class="table table-striped">
  <thead>
    <tr class="table-info">
      <th scope="col">登録されたid番号</th>
      <th scope="col">タイトル</th>
      <th scope="col">テキスト</th>
      <th scope="col">詳細</th>
      <th scope="col">編集</th>
      <th scope="col">削除</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
    <tr>
        <td><%= link_to book.id, book_path(book) %></td>
        <td><%= book.title %></td>
        <td><%= book.text %></td>
        <td><%= link_to '表示',book_path(book), class: "btn-sm btn-success" %></td>
        <td><%= link_to '編集',edit_book_path(book), class: "btn-sm btn-secondary" %></td>
        <td><%= link_to '削除',book_path(book),
          method: :delete, class: "btn-sm btn-danger",
          data: {confirm: '本当に削除してもいいですか？'} %>
        </td>
    </tr>
    <% end %>
  </tbody>
</table>

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap";

books.scss

// Place all the styles related to the books controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

welcome.scss

// Place all the styles related to the welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

imageに追加した内容,jpg

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap";
.jumbotron {
  background-image: image-url("栄養画像参考.jpg");
  background-size: cover;
}

サーバーで表示されたメッセージ

eiyou.jpgに変更後

route.rb

Rails.application.routes.draw do
  get 'welcome/index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :books
  root 'welcome#index'
end

books_controller.rb

class BooksController < ApplicationController#to do index アクションを作る

  def index
    @books = Book.all
  end

  def show
    @book = Book.find(params[:id])
  end

  def new
    @book = Book.new
  end

  def edit
    @book = Book.find(params[:id])
  end

  def create
    @book = Book.new(book_params)
    if @book.save
      redirect_to @book
    else
      render :new
    end
  end

  def update
      @book = Book.find(params[:id])
      if @book.update(book_params)
        redirect_to @book
      else
        render :edit
      end
  end

  def destroy
    @book = Book.find(params[:id])
    @book.destroy!
    redirect_to books_path
  end



private
  def book_params
    params.require(:book).permit(:title, :text)
  end
end

Comments

[CHERRY]

CSSは、どうなっていますか？

[-maeji-]

>CSSは、どうなっていますか？

すいません、cssはこの場合、stylesheets/以下〜のファイルで良いのでしょうか。
application.scss、books.scss、、we、welcome.scssを追記編集を編集しました。

Answer 1

HTML に指定しただけでは、枠しか作られませんので CSS で background-image を指定する必要があります。

app/assets/images に画像を入れます。( 例: title.jpg )

app/assets/stylesheets/application.scss に こんな感じで...

.jumbotron {
  background-image: image-url("title.jpg");
  background-size: cover;
}

必要に応じて、サイズや位置を調整してください。

---

(追記)

ん〜。
どこが違うのかなぁ...

回答した時点では、机上の空論(つまり未テスト)だったので見落としでもあるのかと思って実際に試してみました。

---

$ rails new test1app

$ cd test1app

$ vi Gemfile

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'

を追加。

$ bundle install

$ rails generate controller Home index

$ vi config/routes.rb に root :to => 'home#index' を追加。

$ vi app/views/home/index.html.erb

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>テスト</h1>
  </div>
</div>

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

$ vi app/assets/stylesheets/application.scss

@import "bootstrap";

.jumbotron {
  background-image: image-url("test1.jpg");
  background-size: cover;
}

を追加

$ app/assets/images/ ディレクトリ に test1.jpg を追加

rails s で起動して、 Web ブラウザで http://localhost:3000/ にアクセスするとエラーなく背景画像付きで表示可能です。

Webブラウザでアクセスした際に rails を起動したターミナルには、下記のようなアクセスログが出ました。

$ rails s

=> Booting Puma
=> Rails 5.2.2 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.0 (ruby 2.4.3-p205), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

Started GET "/" for 127.0.0.1 at 2019-01-17 18:06:55 +0900
Processing by HomeController#index as HTML
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (1.2ms)
Completed 200 OK in 371ms (Views: 361.4ms | ActiveRecord: 0.0ms)

生成された application.css ( /assets/application.self-a6f77e9cc86f76867156c3f0a4c8b4696fdd76fe11b1f26347ca9eda80e4577e.js?body=1 )は、こんな感じでした。

(上側略)
/* line 19, app/assets/stylesheets/application.scss */
.jumbotron {
  background-image: url(/assets/test1-c88f5524ff80a80a25f2b9793579b7db6ded58d7218bb11e1c089ed379ebb6bc.jpg);
  background-size: cover;
}

Comments

[-maeji-]

ありがとうございます。

＞app/assets/images に画像を入れます。( 例: title.jpg )

imageファイルに画像を入れる流れがどうやればいいのか、わからないです。
中にある.keepは関係ないと思っているんですが、imageのところで新規ファイル作成して、assets/images/"title".jpgとしてあげれば良いのでしょうか？

[-maeji-]

間違ってるかもしれませんが、トライしてみました。

画面変わり、
We're sorry, but something went wrong.
If you are the application owner check the logs for more information.と表示されてしまいました。
使用した画像が問題なのか、ファイルの作成がおかしかったのでしょうか。

メッセージと編集内容を追記するので指摘いただけたらと思います。

[CHERRY]

ファイル名に「漢字」(マルチバイト文字)を使われているのですね。

image-url がマルチバイト文字に対応しているか確認できていないのですが、たとえば、ファイル名を英数字にしたらどうなるでしょうか？

[-maeji-]

eiyou.jpgとし、

.jumbotron {
background-image: image-url("eiyou.jpg");
background-size: cover;
}
に編集し直してみました。
するとメッセージは消え、元の画面に戻ったのですが、画像は挿入されていませんでした。（元の背景のまま）
どこかファイル編集の仕方が間違ってるか、画像の大きさなどが問題なのでしょうか...

[CHERRY]

うーん。

Webブラウザで読み込んでいる application.css には、記載したスタイルの指定は反映されていますか？

Web ブラウザのデベロッパーツールのコンソールに　エラーメッセージ等が出ていたりしますか？

` rails s `を実行したターミナルに エラーが表示されていたりするでしょうか？

[-maeji-]

引き続いての回答、誠にありがとうございます。

今、rails sで出力し直し、再読み込みをして、ターミナルを確認しましたところ、
```
Started GET "/images/eiyou.jpg" for 127.0.0.1 at 2019-01-17 16:22:17 +0900

ActionController::RoutingError (No route matches [GET] "/images/eiyou.jpg"):
```
このような記述が確認できました。
ルートとアクションが紐づいていない、ルートファイルに何か記載際ないと行けなかったのでしょうか。

[CHERRY]

今、新規 rails アプリを作って回答した内容だけを追加して試してみましたが、普通に表示できるようです。

既存のアプリに組み込まれているみたいなので、route が競合しているとか何かあるのかもしれません。

[-maeji-]

お忙しい中、わざわざありがとうございます。

恥ずかしい話ですが、routeは動画教材を真似て編集したのですが、welcomeなんとかという部分はなんでwelcomeってなっているのか私自身もよくわかってないですが、resourcesもありますしこちらが原因なのでしょうか...

finderの方で保存されたデータ、画像名が感じのままだったので修正してみたのですが、これも変化なしです。
もう少し頑張ってみます...