css 风格的背景图像在顺风的 laravel 中不起作用

Question

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

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

Answer 1

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

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

url() docs

background-image docs

css 风格的背景图像在顺风的 laravel 中不起作用

background-image in css style doesn't work in laravel with tailwind

html

css

laravel

styles

tailwind-css