在除根页面之外的每个页面上加载 CSS、JS 和图像时出错

Question

本地开发环境正确加载 laravel 站点的第一页，但之后的任何页面都缺少 CSS、JS 和图像。（没有加载）

我正在我的本地服务器上设置一个站点，该站点可在实时站点和暂存站点上运行。他们的设置使用 Apache，而我的设置使用 Nginx 和 Homestead。

我可以让网站正确加载第一页。当我导航到其他页面时，加载 html，但加载 CSS、JS 或图像的 none。

我已经仔细检查了我正确提取内容的所有文件夹，并且所有内容都存在。（第一页正确加载）

当我查看控制台时，这是我收到的错误消息：

我看到了 18 条这样的错误消息。所有与 CSS、JS 和图像相关。

我已经坚持了好几个小时，并且对服务器端技术非常了解。任何帮助将不胜感激。

Answer 1

避免通过相对链接链接到静态资产。
所以而不是

<img src="images/photo.png">
<link href="front/css/bootstrap.min.css">
<script src="front/js/app.js">

使用 asset 帮助程序找出完整的 url

<img src="{{ asset('images/photo.png') }}">
<link href="{{ asset('front/css/bootstrap.min.css') }}">
<script src="{{ asset('front/js/app.js') }}">

Answer 2

@Caddy DZ 的解决方案非常适合 Laravel，因为它会生成一个绝对值 URL，但我认为您真正理解为什么会发生这种情况很重要，这样您就不会被卡住再来一次。

假设您正在从下面的 URL 查看您的网站，并且有两个链接的 CSS 资源：
https://example.com/product/101

1) <link href="front/css/bootstrap.min.css">
2) <link href="/front/css/bootstrap.min.css">

两个链接产生不同的结果！您必须使用前导 / 来指示站点根目录，否则所有资源都将相对于当前目录路径 /product.

1) https://example.com/product/front/css/bootstrap.min.css
2) https://example.com/front/css/bootstrap.min.css

或者，Laravel 提供 asset() 帮助程序，它将生成绝对 URL。

<link href="{{ asset('front/css/bootstrap.min.css') }}">

// becomes an absolute URL
<link href="https://example.com/front/css/bootstrap.min.css">

Error loading CSS, JS, and images on every page except for root page