RailsAPIで、base64エンコードした画像を配信したい

現在、Rails5(APIモード) + Vue.jsで、SPAの実装を行っています。

現在、動的に変更可能な画像は全てbase64エンコードした形式でDBに保存しているのですが、その画像をsend_dataで配信しようとすると上手く表示できずにいます。

実装は以下です(このStackOverFLowの回答を参考にしました)

ruby
1# Controller
2class XxxController < ApplicationController
3  def by_index
4    index = params[:index]
5    # pictureテーブルのpictureカラムにbase64エンコードした画像が入っている
6    picture = Picture.find_by(index: index).picture
7
8    send_data ::Base64.decode64(picture),
9              filename: "#{index}.png",
10              type: 'image/png',
11              disposition: 'inline'
12  end
13end
14
15# router.rb
16Rails.application.routes.draw do
17  get 'xxx/picture/:index', to: 'xxx#by_index'
18end

この状態で、localhost:xxxx/xxx/picture/0等にアクセスすると、特にエラーは発生しないのですが、画像ではなく参照切れのアイコンが表示されてしまいます。
httpステータスも200で、railsのログもエラーは出ていません。
ブラウザで直接表示しても、画像は表示されませんでした。

試しに、imgタグのsrcに直接DBのbase64を入れてみたところ正常に表示されたので、データの不備ではなさそうです。

心当たりある方、ご教授よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

DBに格納されている文字列ですが、
可能性としては、"data:image/png;base64,iVBORw0KGgo...." という形式で格納されているのではないでしょうか？

この形であれば、そのままデコードしても画像にはならないが、
imgタグのsrcに直接設定すれば画像は表示されますので、今起きている現象に一致します。

推測なので、間違っていたらすいません。

ruby
1class XxxController < ApplicationController
2  def by_index
3    index = params[:index]
4    # pictureテーブルのpictureカラムにbase64エンコードした画像が入っている
5    # "data:image/png;base64,iVBORw0KGgo...." の形式で入っていると仮定
6    picture = Picture.find_by(index: index).picture
7 
8    # "iVBORw0KGgo...."
9    base64_image = picture.split(',', 2).last
10
11    send_data ::Base64.decode64(base64_image),
12              filename: "#{index}.png",
13              type: 'image/png',
14              disposition: 'inline'
15  end
16end