Vue から複数の画像をActive Storageに保存した時に、apiに反映させるjbuilderの書き方がわからない。

Question

フロントエンドはVue、バックエンドはRails で実装を進めています。

Vue から複数の画像をActive Storageに保存した際、各画像をrails_blob_urlしてimagesの配列に格納した状態でapiに反映させたいのですが、jbuilderの書き方がいまいち分からず困っています。
どのように書けば良いのかご教示お願い致します。よろしくお願い致します。

has_one_attached :imageで1枚で保存出来るようにした時はrails_blob_urlを使用して、URLを取得出来ています。

app/views/api/designs/show.json.jbuilder

   json.extract! @design, :id, :title, :description, :nail_part
   json.image rails_blob_url(@design.image) if @design.image.attached?

http://localhost:3000/api/designs/1

{
  id: 1,
  title: "title1",
  description: "description1",
  nail_part: "hand",
  image: "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsi/dog.png"
}

has_many_attached :imagesにして複数画像を保存できるようにした場合の試した書き方が以下です。

試してみた書き方1

json.extract! @design, :id, :title, :description, :nail_part

json.array! @design.images do |image|
  json.images [rails_blob_url(image)]
end

↓エラーになる。

Can't merge [{"images"=>["http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--27e2f8064adb107762817c40b91bdaa3cc60f85c/2022-08-15%2013-41-38%20UTC"]}, {"images"=>["http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e00459b6810aa1166ac9b74d57bd16e1e31c9262/2022-08-15%2013-41-38%20UTC"]}] into {"id"=>11, "title"=>"test", "description"=>"test", "nail_part"=>"hand"}

試してみた書き方2

json.array! @design.images do |image|
  json.extract! @design, :id, :title, :description, :nail_part
  json.images [rails_blob_url(image)]
end

↓分かれてしまう。

[
{
id: 11,
title: "test",
description: "test",
nail_part: "hand",
images: [
"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--27e2f8064adb107762817c40b91bdaa3cc60f85c/2022-08-15%2013-41-38%20UTC"
]
},
{
id: 11,
title: "test",
description: "test",
nail_part: "hand",
images: [
"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e00459b6810aa1166ac9b74d57bd16e1e31c9262/2022-08-15%2013-41-38%20UTC"
]
}
]

試してみた書き方3

json.extract! @design, :id, :title, :description, :nail_part
@design.images.map do |image|
  json.images [].push(rails_blob_url(image))
end

↓1枚しか格納されない。

{
id: 11,
title: "test",
description: "test",
nail_part: "hand",
images: [
"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e00459b6810aa1166ac9b74d57bd16e1e31c9262/2022-08-15%2013-41-38%20UTC"
]
}

理想

{
id: 11,
title: "test",
description: "test",
nail_part: "hand",
images: [
"http://localhost:3000/rails/active_storage/blobs/redirect/1枚目","http://localhost:3000/rails/active_storage/blobs/redirect/2枚目"
]
}

よろしくお願い致します。

Answer 1

mapを使って値を取得する事が出来ました。

json.extract! @design, :id, :title, :description, :nail_part
urls = @design.images.map { |image| rails_blob_url(image) }
json.images urls if @design.images.attached?