laravel localhost/public/index.php 不显示背景图片和 svgs，但“php artisan serve”显示它们答案

【问题标题】：laravel localhost/public/index.php doesn't show background image and svgs, but "php artisan serve" shows themlaravel localhost/public/index.php 不显示背景图片和 svgs，但“php artisan serve”显示它们
【发布时间】：2019-06-19 05:54:10
【问题描述】：

我的电脑上有一个漂亮的小型 laravel 项目。

在welcome.blade.php 文件上，它有一个背景图像。并且图像位于

公开/图片/

目录。

我使用以下 CSS 来调用和表示它们：

html, body {
color: #f4f6f7;
font-family: 'Nunito', sans-serif;
font-weight: 500;
height: 100vh;
margin: 0;

background-image: url('/images/back.png');
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}

这个项目也包含一个 favicon 图标，这个图标是按照 laravel 设计的。

问题是：

当我从我的 chrome 转到 localhost/got/public/index.php 时

它会加载我的项目，但无法显示或加载背景图片或网站图标。

但是当我运行php artisan serve 它运行良好，没有问题。

我缺少什么？

【问题讨论】：

当您使用localhost/got/public/ 时，您的路径会有所不同。尝试为您的项目创建一个虚拟主机。
太棒了。谢谢你。那行得通……但我想知道，为什么！
不客气。查看why 部分的答案。

标签： php css laravel laravel-artisan

【解决方案1】：

当您使用localhost/got/public/ 时，您的路径会有所不同。尝试为您的项目创建一个虚拟主机。

嗯，这就是为什么部分。当您使用 artisan serve 时，图像路径（即相对：/images/back.png）指的是http://localhost:8000/images/back.png。当您使用本地服务器时，图像再次引用http://localhost/images/back.png，但您的地址是localhost/got/public/images/back.png。

【讨论】：

我想在 LIVE 上部署它。会发生什么？由于没有内部变化，它会在实时服务器上运行良好吗？
使用虚拟主机的好处是您可以确保您的本地项目几乎可以在主机上无缝运行。我说几乎是因为某些方面（例如文件上传）可能与本地操作系统有一些不兼容。如果我的回答有帮助，请将其标记为正确答案。
是的，你的回答解决了我的问题。我迟到了，因为我在考虑我应该选择哪个答案。

【解决方案2】：

请使用这个：

background-image: url('{{ asset('images/back.png') }}');
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}

【讨论】：

感谢您的回答。我试过了，但我的编辑器，可能有问题......这不起作用......

【解决方案3】：

尝试将以下代码添加到您的webpack.mix.js

.options({ processCssUrls：假， })

【讨论】：

我应该在哪里包含这个？
你会在你的 laravel 项目的根目录中找到 webpack.mix.js。

【解决方案4】：

加载头文件时，包括 .css 文件，使用 {{ asset("filesurl") }}

【讨论】：