【Rails】form_withのsubmitボタンを画像にする方法

はじめに

オリジナルアプリ作成の際に実装したので、アウトプットします！

実装したいこと

Railsのform_withのsubmitボタンを画像に変更する。

実装方法

image_submit_tagを使う！

qiita.html.erb

<%= form_with(url: search_foods_path, local: true, method: :get, class: "search-form") do |f| %>
  <%= f.text_field :keyword, placeholder: '料理名で検索', class: 'input-box' %>
  <div class="search-button">
    <%= image_submit_tag("search.png", class: 'search-icon') %>
  </div>
<% end %>

その他の方法

button_tag要素をしようして、typeにsubmitを指定する。
そして、ブロックでimage_tag要素を渡す！　

qiita.html.erb

<%= form_with(url: search_foods_path, local: true, method: :get, class: "search-form") do |f| %>
  <%= f.text_field :keyword, placeholder: '料理名で検索', class: 'input-box' %>
  <%= button_tag type: :submit, class: "search-button" do %>
    <%= image_tag "search.png", class:"search-icon" %>
  <% end %>  
<% end %>

参考リンク

https://railsdoc.com/page/image_submit_tag
https://railsdoc.com/page/button_tag

終わりに

間違い等あればご指摘いただけると嬉しいです！