Problem with rendering an image - laravel vue.js inertia

Question

I need a little help. I can see the image on Page A but not on Page B. Both pages output the same image path.

This works:

Controller A:

function index()
    {
        $games = Game::get();
        return Inertia::render('Games', ['games' => $games]);
    }

Page A:

<Link :href="route('show-game', game.id)" v-for="game in games" :key="game.id"
            class="flex flex-row h-36 md:h-20 odd:bg-white even:bg-green-100 hover:bg-slate-200">
        <div href="" class="flex items-center justify-center w-20 border">
            <div class="p-1">
                <img :src="game.image" />
            </div>
        </div>
</Link>

This works not:

Controller B:

public function index($id)
    {
        $game = Game::where('id', $id)->get()->first();
        $gameComments = Game::find($id)->usergameComments;

        return Inertia::render('ShowGame', ['game' => $game, 'gameComments' => $gameComments]);
    }

Page B:

<div class="flex flex-row h-40">
    <div class="flex items-center justify-center w-20 border xl:w-40">
        <div class="p-1">
            <img :src="game.image" />
        </div>
        <div class="flex items-center justify-center w-16 border xl:w-40">
             <div class="text-xs xl:text-2xl">
                  {{ game.title }}
            </div>
       </div>
    </div>

</div>

What confuses me is that page B shows the game.title. I ask for help. Thanks

I tried outputting "game" on side B via a foreach loop. But that led to errors. And it really isn't necessary.