How t o display uploaded image in react

Question

I have uploaded an image with active storage in rails and attached it to a model but am stuck with how i an display it with the rest of the data. Am using react and ruby at the back end both combined together. when i hit in the console Home.first.image_url it shows that the image is uploaded but when i console.log the data coming from the server the image is not included.`

here is code

here is my react front end

useEffect(() => {
    let path = 'api/v1/homes'
    axios.get(path)
        .then(res => {
            console.log(res)
            setItems(res.data)
            setIsLoading(false);
        })
        .catch(err => {
            setIsLoading(false);
            console.log(err)
        })
}, [])
return (
    <div>
                }}
                dataSource={items}
                renderItem={(home, index) => (
                    <List.Item>
                        <Card
                            hoverable
                            title={home.title}
                            key={index}
                            cover={
                                <img src="${home.image_url}" />
                                // <img className='itemCardImage' src={home.image_url}
                                //     onClick={() => navigate(`/details/${home.id}`)}
                                // />
                            }

am using rails 6 with active storage and am uploading image from active admin form. I am making an e-commerce website where i want admins to create products with images . below is my active admin form where image is uploaded from

 form title: 'Create a new property' do |f|
    f.inputs  do
      f.input :image, as: :file
    end
    f.actions
  end

and here is my controller

class Api::V1::HomesController < ApplicationController
  def index
    @homes = Home.all.order(created_at: :desc)
    render json: @homes
  end

  # GET /homes/1 or /homes/1.json
  def show
    if @home
      render json: @home
    else
      render json: @home.errors
    end
  end

  # POST /homes or /homes.json
  def create
    @home = Home.new(home_params)

    if @home.save
      render json: HomeSerializer.new(@home).serializable_hash[:data][:attributes]
    else
      render json: @home.errors
    end
  end

  private

  # Only allow a list of trusted parameters through.
  def home_params
    params.require(:home).permit(:title, :description,  :price, :availability, :image)
  end
end

here is my console from the terminal

Started GET "/$%7Bhome.image_url%7D" for ::1 at 2023-01-31 18:04:27 +0300
  Processing by HomesController#index as */*
    Parameters: {"unmatched"=>"${home"}

am really a new junior developer . am intention is to make a big e-commerce website that sells and rents houses and plots of land. I want admin to manage the site like creating items with images and uploads them. am using active storage in and am still in development mode.

Answer 1

Mutebi you have everything nearly fine, only issue you are facing why you are unable to display images is possibly a line in your routes file for unmatched routes get "*unmatched", to: "homes#index" so this is blocking routes from rails/activestorage. If your change that code to something like:

match '*unmatched_route', via: :all, to: 'homes#index', constraints: lambda { |request|
    request.path.exclude? 'rails/active_storage'
}

Should work perfectly fine.