Фоновое изображение не отображается в Laravel

Question

Я пытаюсь показать фоновое изображение в моем проекте Laravel из css. Но изображение не показывается. Я проверил путь к изображению, и это правильно. Я использую Voyager Admin Panel . Я сохраняю путь к изображению из config/filesystems.php

'public' => [
        'driver' => 'local',
        'root' => public_path('images'),
        'url' => env('APP_URL').'/public/images',
        'visibility' => 'public',
    ],

HTML

<div class="carousel-item active" style="background-image: url('public/images/{{ $banner[0]->banner_image }}')">

И мой путь к изображению public\images\image_name.

В консоли я обнаружил следующую ошибку

Фактический путь public/images/banners/March2019/image_name

Но здесь показано public/images/bannersMarch2019image_name. Без косой черты .

Answer 1

Попробуйте этот код в своем html:

<div class="carousel-item active" style="background-image: url('{{asset('images/banners/March2019') }}/{{$banner[0]->banner_image}}');">

Использование вспомогательной функции asset для достижения вашего реального пути.Я надеюсь, что это будет полезно.

Answer 2

вы не должны добавлять public в свой метод url, корень веб-сервера публичный, поэтому ваш код должен быть:

<div class="carousel-item active" style="background-image: url('images/{{ $banner[0]->banner_image }}')">

Answer 3

Ваш скриншот предлагает / структуру папок, которую вы могли бы использовать Панель администратора Voyager , если это так, то вы можете использовать свое изображение следующим образом:

<div class="carousel-item active" style="background-image: url('{{ Voyager::Image($banner[0]->banner_image) }}')">

Это должно помочь вам, я бы посоветовал внимательно прочитать документы Voyager.

Answer 4

Это не проблема Laravel, а проблема начальной загрузки.Взгляните на bootstrap> компоненты> карусель

Попробуйте это:

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="{{ url('public/images/' . $banner[0]->banner_image) }}" class="d-block">
    </div>
  </div>
</div>