【JavaScript・Rails】Ajaxで画像が表示されない（ルーティングエラー）

Question

前提・実現したいこと

今、チャットアプリでメッセージ送信機能の実装をしています。
そこでAjaxを使い、非同期でメッセージ送信ができるようにしたいです。

メッセージを送信すると送信者のユーザー名とテキストメッセージは表示されるのですが、
ユーザーのプロフィール画像やメッセージとして送信した画像が表示されません。
その後リロードするとうまく表示されます。

ちなみに、gemはcarrierwaveを使っています。

画像が表示されない原因を探るためにターミナルでログを確認すると、
ルーティングエラーが起こっていました。

解決方法がわかる方ご教授いただけますと幸いです。

発生している問題・エラーメッセージ

ActionController::RoutingError (No route matches [GET] "/groups/32/[object%20Object]")

該当のソースコード

▼message.js

$(function(){
  function buildHTML(message){
    if ( message.image ) {
      let html = 
      `<div class="Message_box">
        <a href="/posts_g/${message.user_id}">
          <img class="Message_box__User_image" src="${message.user_image}">
        </a>
        <div class="Message_box__Content">
          <a class="Link Text Message_box__Content__Name" href="/posts_g/${message.user_id}">${message.user_name}</a>
          <div class="Message_box__Text Text">
            <p>${message.text}</p>
            <img class="Message__image" src="${message.image}">
          </div>
        </div>
      </div>`
      return html;
    } else {
      let html =
        `<div class="Message_box">
          <a href="/posts_g/${message.user_id}">
            <img class="Message_box__User_image" src="${message.user_image}">
          </a>
          <div class="Message_box__Content">
            <a class="Link Text Message_box__Content__Name" href="/posts_g/${message.user_id}">${message.user_name}</a>
            <div class="Message_box__Text Text">
              <p>${message.text}</p>
            </div>
          </div>
        </div>`
      return html;
    };
  }
  $('.Main__form__Form').on('submit', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    let url = $(this).attr('action');
    $.ajax({
      url: url,
      type: 'POST',
      data: formData,  
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      let html = buildHTML(data);
      $('.Main__content').append(html);
      $('.Main__content').animate({ scrollTop: $('.Main__content')[0].scrollHeight});
      $('form')[0].reset();
      $('.Main__form__contents__btn').prop('disabled', false);
    })
    .fail(function() {
      alert("メッセージ送信に失敗しました");
      $('.Main__form__contents__btn').prop('disabled', false);
    })
  });
});

▼create.json.jbuilder

json.user @message.user
json.user_id @message.user.id
json.user_image @message.user.profile_image
json.user_name @message.user.name
json.text @message.text
json.image @message.image
json.group_id @message.group.id

▼messages_controller.rb

class MessagesController < ApplicationController
  before_action :set_group

  def index
    @user = User.find_by(id: params[:user_id])
    @message = Message.new
    @messages = @group.messages.includes(:user)
  end

  def create
    @message = @group.messages.new(message_params)
    @user = @group.users.last
    if @message.save
      respond_to do |format|
        format.json
      end
      @user = @message.user
    else
      @messages = @group.messages.includes(:user)
      render :index
    end
  end

  private

  def message_params
    params.require(:message).permit(:text, :image).merge(user_id: current_user.id)
  end

  def set_group
    @group = Group.find(params[:group_id])
  end
end

▼index.html.haml

.Main
  .Main__Header
    .Title1
      = "#{@user.name}さんとのトークルーム"
  .Main__content
    = render @messages
  .Main__form
    = form_with model: [@group, @message], url: "/groups/#{@group.id}/messages",  html: {class: "Main__form__Form"}, remote: true, 'data-type': :json do |f|
      .Main__form__contents
        .Main__form__contents__input
          = f.text_area :text, class: 'Main__form__contents__input__text'
          = f.label :image, class: 'Main__form__contents__input__image' do
            = icon('far', 'image', class: 'Main__form__contents__input__icon')
            = f.file_field :image, class: 'Main__form__contents__input__image__file'
        = f.submit '送信', class: 'Main__form__contents__btn'

▼_message.html.haml

.Message_box
  = link_to posts_g_path(message.user) do
    = image_tag message.user.profile_image.url, fallback: "no-image.jpg", class: "Message_box__User_image"
  .Message_box__Content
    = link_to "#{message.user.name}", posts_g_path(message.user), class: "Link Text Message_box__Content__Name"
    .Message_box__Text.Text
      - if message.text.present?
        = simple_format(message.text)
      - if message.image.present?
        = image_tag message.image.url, class: 'Message__image'

▼routes.rb

Rails.application.routes.draw do
  get 'reviews/create'
  get 'reviews/show'
  devise_for :users
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end

  root "home#index"
  
  resources :posts_g
  resources :posts_c
  
  resources :groups, only: [:index, :show] do
    resources :messages, only: [:index, :create]
  end

  get '/groups/:id/create', to: 'groups#create'
end

試したこと

index.html.hamlのformにremote: trueオプションをつけたり、urlを指定してみたのですがうまく行きませんでした。

補足情報（FW/ツールのバージョンなど）

▼rails routesをターミナルに入力した結果

group_messages  GET    /groups/:group_id/messages(.:format)       messages#index
               POST    /groups/:group_id/messages(.:format)       messages#create

ターミナルに表示されているログ

Answer 1

create.json.jbuilderで設定したカラム名が間違っていたようです。
以下のように、画像のカラムを指定する行の末尾に_urlを足したら解決しました。

▼create.json.jbuilder

json.user_image @message.user.profile_image_url
json.image @message.image_url

Answer 2

formのactionが間違っているだけでは？

Comments

[kumamin]

つい先程、create.json.jbuilderを修正したら解決できました。
ご回答ありがとうございました！