css 样式中的背景图像在带有尾风的 laravel 中不起作用

Posted 2023-02-22

【中文标题】css 样式中的背景图像在带有尾风的 laravel 中不起作用

【英文标题】：background-image in css style doesn't work in laravel with tailwind

【发布时间】：2022-01-04 02:21:07

【问题描述】：

背景图片没有出现，图片路径是正确的，我用它测试它是有效的>>

<div class="flex items-end justify-end w-full h-56"
     style="background-image: 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- 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>

【参考方案1】：

您还需要将 url 包装在 css url() 函数中：

background-image: url( url('storage/images/services/' . $order->image) )"

url() docs

background-image docs