対象者

・画像投稿機能を作りたい方
・画像を表示させたい方

手順目次

1.Gemfileに画像投稿用のgemを追加

2.カラムの追加とデータベースの反映

3.ストロングパラメーターとの設定とattachmentメソッドの追加

４-１.　画像を投稿する場合

４-２.　画像を表示する場合

実際の手順と実例

1.Gemfileに画像投稿用のgemを追加

# 画像投稿用gem
gem "refile", require: "refile/rails", github: 'manfe/refile'
# 画像加工用（サイズ調整など）gem
gem "refile-mini_magick"

RefileというGemを使って画像投稿ができるようにします。
Refileとは、アプリケーション向けのファイル・アップロードのライブラリのことです。
さらにmini_magickは画像加工ができるようにするライブラリです。

その後bundle installを実行します。

2.カラムの追加とデータベースの反映

実例として今回使用するモデルはUser，カラム名をprofile_image_idとします。

ターミナルで以下を実行します。

username:~/environment/bookers2 $ rails g migration AddProfileImageIdUsers profile_image_id:string
```````````
作成後は下記のコマンドを実行しないとデータベースに反映されません。

```````
username:~/environment/bookers2 $ rails db:migrate
``````````


### 3.ストロングパラメーターとの設定とattachmentメソッドの追加

**ストロングパラメーターとモデルで追加する際、カラム名はpofile_image_idですが、idはつけません**

users.controllerにて一番下にストロングパラメーターを設定します。


`````````````
  private

  def user_params
    params.require(:user).permit(:profile_image)
  end

``````````

また、モデルにattachmentメソッドも追加します。

``````
class User < ApplicationRecord
：
：
attachment :profile_image
:
:
end
`````````


### 4-1.画像を投稿する場合

```````
<%= attachment_field:カラム名 %>
``````

画像投稿用のフォームです。
実例では、viewページに追加してます。

```
<%= f.attachment_field :profile_image %>
```

### 4-2.画像を表示する場合

下記が構文です。

`````
<%= attachment_image_tag 保存先インスタンス名(もしくは変数), :保存先カラム名, 代替画像，　:サイズ（横幅,高さ）  %>
`````

これを画像を表示させたい場所に挿入します。
実例は以下のとおりです。

`````
<%= attachment_image_tag user, :profile_image, fallback: "no_image.jpg", size:'80x80' %>
````
**fallback**
何も画像データがカラムに保存されていないときに変わりとなる画像を挿入してくれます。
今回はno.image.jpgを挿入しました。no.image.jpg画像データはapp/asset/imageｓに保存をしないと反映されません。

**size**
fillを使うやり方もありますがsizeを使用しています。「数字　エックス　数字」となることに注意してください。



以上が画像の投稿と表示の手順です！