為什么Laravel組件無法正確渲染？取決于路線？-有解無憂

當我點擊http://127.0.0.1:8000/welcome時，一切都很好。但是使用http://127.0.0.1:8000/hh/welcome頁面看起來好像沒有 CSS 參考或任何東西。

知道為什么會這樣以及如何解決嗎？非常感謝！

路線 > web.php

Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);

應用程式 > Http > 控制器 > BikeController.php

    public function show(Bike $bike)
    {
        return view('bikes.show', [
            'bike' => $bike
        ]);
    }

資源 > 視圖 > 自行車 > show.blade.php

<x-layout>
<h1>Hello World!</h1>
</x-layout>

資源 > 視圖 > 組件 > layout.blade.php

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>BM | Dashboard &amp; Web App Template</title>

    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
    <link rel="manifest" href="assets/img/favicons/manifest.json" />
    <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
    <meta name="theme-color" content="#ffffff" />
    <script src="assets/js/config.js"></script>
    <script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css?family=Open Sans:300,400,500,600,700|Poppins:300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet" />
    <link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
    <link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
    <link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
    <link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
    <link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
    <script> 
        var isRTL = JSON.parse(localStorage.getItem("isRTL")); 
        if (isRTL) {   
            var linkDefault = document.getElementById("style-default");   
            var userLinkDefault = document.getElementById("user-style-default");   
            linkDefault.setAttribute("disabled", true);   
            userLinkDefault.setAttribute("disabled", true);   
            document.querySelector("html").setAttribute("dir", "rtl"); 
        } else {   
            var linkRTL = document.getElementById("style-rtl");   
            var userLinkRTL = document.getElementById("user-style-rtl");   
            linkRTL.setAttribute("disabled", true);   
            userLinkRTL.setAttribute("disabled", true); 
        }
    </script>
  </head>

  <body>
    <main class="main" id="top"> 
        <div class="container" data-layout="container">   
            <script>     
                var isFluid = JSON.parse(localStorage.getItem("isFluid"));     
                if (isFluid) {       
                    var container = document.querySelector("[data-layout]");       
                    container.classList.remove("container");       
                    container.classList.add("container-fluid");     
                }   
            </script>      
            @include('_nav-vertical')   
            <div class="content">     
                @include('_nav-top')
                {{ $slot }}
                @include('_footer')   
            </div>   
            {{-- @include('_modal')  --}}
        </div>
    </main>

    <script src="vendors/popper/popper.min.js"></script>
    <script src="vendors/bootstrap/bootstrap.min.js"></script>
    <script src="vendors/anchorjs/anchor.min.js"></script>
    <script src="vendors/is/is.min.js"></script>
    <script src="vendors/echarts/echarts.min.js"></script>
    <script src="vendors/fontawesome/all.min.js"></script>
    <script src="vendors/lodash/lodash.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="vendors/list.js/list.min.js"></script>
    <script src="assets/js/theme.js"></script>
  </body>
</html>

uj5u.com熱心網友回復：

因為您當前正在加載相對于您的 URL 的 CSS

嘗試以下操作：

    <link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>

或看看：https ://laravel.com/docs/9.x/helpers#method-asset

uj5u.com熱心網友回復：

您實際上在 layout.blade.php 中以錯誤的方式加載資產進行了這些修改。然后它會正常作業。將此應用于您的所有資產，如影像、CSS 和 JS 檔案。將資產函式應用于花括號中的每個資產。

<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />

將此應用于所有 CSS 也應用于 JS 像這樣

<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>

還要確保所有檔案在磁盤上都是可用的。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451570.html

標籤：php 拉拉维尔成分

上一篇：VisualStudio2022無法添加服務參考且無程式集參考節點

下一篇：用戶在textarea中輸入后如何獲取單詞？