在 Rails7 中拾取图像后立即显示

Question

我有一个新用户表单，我希望用户在其中选择头像。我遵循了一些教程，一切正常，但是 UI/UX 很糟糕，因为您首先必须在显示图像之前提交完整的用户表单。有没有办法在用户为新帐户输入数据时显示图像？

为简化起见，假设这是我的表格

  <%= form_with(model: user) do |f| %>
    <div id="avatar_picker">
      <%= f.label :avatar%>
      <%= f.file_field :avatar %>
      <%= link_to "Delte avatar", purge_avatar_user_path(current_user), method: :delete %>
    </div>

    <div>
      <%= f.label :email %>
      <%= f.email_field :email %>
    </div>

     <%= f.submit "create" %>
  <% end %>

现在我想要的是，当用户选择一个头像时，它会立即显示在 avatar_picker div 中，以便用户可以看到它的样子。现在我必须提交表格才能看到图片。

这里有什么好的做法？