Laravel自定义动态card组件渲染后尺寸为0x0无法正常显示求助

• 你使用了Blade模板输出变量的{{ }}语法给组件传动态参数，不符合Laravel组件动态传参的语法规范，实际传入组件的路径会携带多余的花括号字符，导致图片资源加载失败
• Bootstrap的card组件本身没有设置默认高度，完全依赖内部内容撑开，图片加载失败后卡片没有内容支撑，就会显示为0x0尺寸

1. 修改shop.blade.php中的组件调用代码，动态传参时给属性名前加冒号:，直接写变量即可，不需要{{ }}包裹：

<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>

2. 可选优化：给card.blade.php中的卡片图片增加最小高度样式，避免后续图片加载异常时卡片完全塌陷：

<img class="card-img-top" src="{{$img}}" alt="Card image cap" style="min-height: 180px; object-fit: cover;">

3. 确认控制器中$products数组里每个元素的img字段对应的资源路径正确，可直接在浏览器中访问验证。

内容的提问来源于stack exchange，提问作者gianmarco varrone