Laravel搭配Tailwind CSS时style内background-image背景图不显示

你的代码中background-image属性不符合CSS语法规范：CSS要求background-image的资源路径必须包裹在url()函数的引号内，你当前的代码直接输出Laravel生成的路径，没有正确嵌套进url()的参数中，导致浏览器无法解析背景图样式。

修改div的style属性写法，将Laravel输出的路径放在url()的引号包裹范围内即可，完整修正代码如下：

<div class="flex items-end justify-end w-full h-56"
     style="background-image: url('{{url("/storage/images/services/".$order->image)}}')">
    <a href="{{route('services.details', $order)}}">
        <button
            class="p-2 mx-5 -mb-4 text-white bg-blue-600 rounded-full hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
            <svg class="w-5 h-5" fill="none" stroke-linecap="round"
                 stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
                 stroke="currentColor">
                <path
                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
        </button>
    </a>
</div>
<div class="px-5 py-3">
    <h3 class="text-gray-700 uppercase">{{ $order->name }}</h3>
    <span class="mt-2 text-gray-500">{{ $order->price }}</span>
</div>

若修改后仍存在问题，可逐一检查以下配置：

• 确认已执行php artisan storage:link创建了public目录到storage/app/public的软链接
• 打开浏览器开发者工具的元素面板，检查对应div的style属性最终渲染结果，确认路径输出正常、无特殊字符转义错误
• 若使用Vite/Laravel Mix打包工具，确认没有配置对inline style的错误转义规则

内容的提问来源于stack exchange，提问作者Osama Mohammed