Railsで画像をデータベースに登録し表示する。

提供: sha.ngri.la
移動先: 案内検索

モデルなどの状況

mysql> describe images;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | int(11)      | NO   | PRI | NULL    | auto_increment |
| filename   | varchar(255) | YES  |     | NULL    |                |
| memo       | text         | YES  |     | NULL    |                |
| photo      | mediumblob   | YES  |     | NULL    |                |
| created_at | datetime     | YES  |     | NULL    |                |
| updated_at | datetime     | YES  |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+

photoに画像を登録します。

画像の登録

_form.html.erbを編集

  <div class="form-group">
    <%= f.label :photo %>
    <%= f.file_field :photo %>
  </div>

を追加しました。

images.controller.rbを編集

  def create
    photo = image_params[:photo]
    image_params = {}
    if photo != nil
      image_params[:photo] = photo.read
    end
    @image = Image.new(image_params)

photo = imgae_params[:photo]以下5行を追加しました。

    def image_params
      params.require(:image).permit(:filename, :memo, :photo)
    end

def image_params:photoを追加しました。

画像の表示

routes.rbの編集

次の5行を追加。

  resources :images do
    member do
      get 'show_image'
    end
  end

images_controllers.rbの編集

  def show_image
    @image = Image.find(params[:id])
    send_data @image.photo, :type => 'image/jpeg', :disposition => 'inline'
  end

index.html.erbの編集

   <%= link_to image_tag(show_image_image_path(image), :width => 300),image %>

show.html.erbの編集

  <%= image_tag(show_image_image_path(@image)) %>

Link