Active Adminのformの画像修正inputに画像を表示する方法

「Active Adminのformの画像修正inputに画像を表示する方法」のアイキャッチ画像

Active Adminのformに画像を追加して、修正する際に既に登録されている画像を表示する方法を調べたのですが、情報がほとんどなく、非常に苦労したので、方法を共有します

※Active Adminにtheme入れてるのでUI若干異なります

結論、hintで対応

f.inputs t('activerecord.models.job_image') do
  f.has_many :job_images, heading: false, allow_destroy: true, new_record: true do |ff|
    ff.input :image, as: :file, hint: image_tag(ff.object.image.to_s, width: 100)
  end
end

上記に辿り着くまでに、

  • react
  • cocoon

で対応もしたのですが、どちらもいい感じに作れないし、なんかモヤっとするしで、それでも諦めずに調査してたらhintが見つかったので使ってみたところ、うまく行きました

参考記事

activeadmin+paperclipで画像管理機能導入メモ