When I hit http://127.0.0.1:8000/welcome everything renders fine. But with http://127.0.0.1:8000/hh/welcome the page looks like it has no CSS references or anything at all.
Any idea why it is like this and how to solve it? Thanks a lot!
routes > web.php
Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);
app > Http > Controllers > BikeController.php
public function show(Bike $bike)
{
return view('bikes.show', [
'bike' => $bike
]);
}
resources > views > bikes > show.blade.php
<x-layout>
<h1>Hello World!</h1>
</x-layout>
resources > views > components > 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 & 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%7cPoppins:300,400,500,600,700,800,900&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>
Because you are currently loading your CSS relative to your URL
Try the following:
<link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>
or take a look at: https://laravel.com/docs/9.x/helpers#method-asset