Background Image is not showing in Laravel

Question

I am trying to show background image in my Laravel project from css. But image is not showing. I have checked the image path and it is correct. I am using Voyager Admin Panel . I am saving image path from 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 }}')">

And my image path is public\\images\\image_name .

In console I have found the below error

Actual path is public/images/banners/March2019/image_name

But here shown public/images/bannersMarch2019image_name . No slash .

Answer 1

Try this code in your html:

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

Using asset helper function to reach your actual path. I hope it would helpful.

Answer 2

This is not a laravel issue but a bootstrap issue. Have a look at bootstrap > components > carousel

Try this:

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

Answer 3

您不应在url方法中添加public，因为webserver的根目录是公开的，因此您的代码应为：

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

Answer 4

Your screenshot suggest/folder structure that you might be using Voyager Admin panel , if that is the case then you can use your image in below manner :

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

This should help you, i would suggest please read voyager docs carefully.

Answer 5

可以说这是视图文件中的div标签，其他页面将无法访问它，因为它仅限于给出路径，在图像前添加/，例如