背景图像未在 Laravel 中显示答案

【问题标题】：Background Image is not showing in Laravel背景图像未在 Laravel 中显示
【发布时间】：2019-08-08 11:51:15
【问题描述】：

我试图在我的 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 }}')">

我的图片路径是public\images\image_name。

在控制台中我发现了以下错误

实际路径为public/images/banners/March2019/image_name

但这里显示的是public/images/bannersMarch2019image_name。 没有斜线。

【问题讨论】：

看看 F12-->style 看看那里发生了什么..
是的，我也从inspect element 进行了检查。路径显示正确
控制台有错误吗？也尝试将height/width 设置为 div
是的，我在控制台中发现了错误。并且文件夹和图像名称之间没有slash！但是为什么！
您在使用 Voyager 管理面板吗？

标签： html css laravel laravel-5

【解决方案1】：

让我们说这是视图文件中的 div 标签其他页面不会访问它，因为它仅限于提供路径，在图像之前添加 / 例如

【讨论】：

【解决方案2】：

您的屏幕截图建议/文件夹结构，您可能正在使用Voyager Admin panel，如果是这种情况，那么您可以按以下方式使用您的图像：

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

这应该对您有所帮助，我建议您仔细阅读 voyager 文档。

【讨论】：

【解决方案3】：

在你的 html 中试试这个代码：

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

使用 asset 辅助函数到达您的实际路径。我希望它会有所帮助。

【讨论】：

【解决方案4】：

这不是 laravel 问题，而是引导问题。看看bootstrap > components > carousel

试试这个：

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

【讨论】：

'的收盘价在哪里
@Dimitri Mostrey....... 在我的轮播中，我必须将图像设置为背景，而不是 img src。
{{ ? {{ ?为什么两次？
如果$banner[0]->banner_image 包含正确的路径，那么{{ url( $banner[0]->banner_image) }} 就足够了，我建议只将文件名保存到数据库，这应该只返回$banner[0]->banner_image ...some_filename
我承认代码有错误，我已经更正了。无论如何，最好使用 Laravel 的集成文件系统 (laravel.com/docs/5.7/filesystem)。在这种情况下，它将是 Storage::url('images/' . $banner[0]->banner_image);

【解决方案5】：

你不应该在你的 url 方法中添加 public，webserver root 是公开的，因此你的代码应该是：

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

【讨论】：