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

#html #css #laravel #laravel-5

#HTML #css #laravel #laravel-5

Вопрос:

Я пытаюсь отобразить фоновое изображение в моем проекте Laravel из css. Но изображение не отображается. Я проверил путь к изображению, и он правильный. Я использую панель администратора Voyager. Я сохраняю путь к изображению из 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 }}')">

И мой путь к изображению publicimagesimage_name .

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

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

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

1. Загляните в F12—> style и посмотрите, что там произошло..

2. да, я тоже проверил из inspect element . Путь показан правильно

3. У вас есть какая-либо ошибка в консоли? Также попробуйте установить height/width значение div

4. да, я обнаружил ошибку в консоли. И между именем папки и изображения нет slash ! Но почему!

5. Используете ли вы панель администратора Voyager?

Ответ №1:

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

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

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

Ответ №2:

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

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

Ответ №3:

Это не проблема 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>

1. где закрытие '

2. @Dimitri Mostrey ……. в моей карусели я не должен устанавливать изображение в качестве фона img src .

3. {{ ? {{ ? почему два раза?

4. Если это $banner[0]->banner_image содержит правильный путь, тогда {{ url( $banner[0]->banner_image) }} было бы достаточно, я предлагаю сохранить только имя файла в базе данных, которое должно возвращать только $banner[0]->banner_image … some_filename

5. Я признаю, что в коде была ошибка, я ее исправил. В любом случае, лучше использовать интегрированную файловую систему Laravel ( laravel.com/docs/5.7/filesystem ). В этом случае это было бы Storage::url('images/' . $banner[0]->banner_image);

Ответ №4:

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

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

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

Ответ №5:

допустим, это ваш тег div в файле views, другие страницы не будут обращаться к нему, поскольку он ограничен указанием пути, добавлением / перед изображениями, например