Laravel component not showing

I'm trying to learn laravel and I'm trying to use some components.

I've created a layout component which is including the navbar and it's correctly working.

I'm still working with key/values arrays into the controller, as I did not study databases yet.

Now I'm trying to create a dynamic card component and I wrote the following in a new component called card.blade.php :

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="{{$img}}" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{$title}}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

On the page, where I want to show these cards(shop.blade.php), I am doing the following :

<x-layout>
    <div class="container">
        <div class="row">
            @foreach($products as $product)
                <div class="col-4">
                  <x-card
                  img="{{$product['img']}}"
                  title = "{{$product['name']}}"
                  />
                </div>
            @endforeach
        </div>
    </div>
</x-layout>

But when I run my local host the cards are not renderized on the browser,or better, they do not have any size(0x0). I can see it from the 'Inspect' that are taking the correct parameters and also are getting correctly generated from the forEach.

I've tried to run the same but without any dynamic variable and the cards are showing correctly with their sizes.

It's like when I try to associate the variables they loose the dimension.

Is there anybody that can help me with this matter? :D

Thank you so much

A component consists of two parts: a class and a view.

Make sure that a class called Card in the App/View/Components folder is created. If so, check that the title and img attributes exist and they are public.

App/View/Components/Card.php:




namespace App\View\Components;

use Illuminate\View\Component;

class Card extends Component
{
    public $img;
    public $title;

    public function __construct($img, $title)
    {
        $this->img = $img;
        $this->title = $title;
    }

    public function render()
    {
        return view('components.card');
    }
}