背景不会在具有相同代码的不同页面上加载
Posted
技术标签:
【中文标题】背景不会在具有相同代码的不同页面上加载【英文标题】：Background doesn't load on different pages with identical code 【发布时间】：2022-01-01 05:44:19 【问题描述】：我有两种不同的注册和登录界面，一种用于员工，另一种用于外部人员。
我只是从员工页面复制了代码并更改了路线，所以一切都是一样的。
但由于某种原因，在外部登录和注册页面上，我的背景没有加载 404 错误代码，我不知道为什么？
有人知道这是为什么吗？
这是它工作的页面：
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
<div class="w-3/6 bg-gray-400 bg-opacity-70 p-8 rounded-lg font-serif text-2xl font-bold">
@if (session('status'))
<div class="text justify-center bg-red-500 p-4 rounded-lg mb-6 text-white text-center">
session('status')
</div>
@endif
<form action=" route('login') " method="post">
@csrf
<div class="mb-4">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value=" old('email') ">
@error('email')
<div class="text-red-500 mt-2 text-sm">
$message
</div>
@enderror
</div>
<div class="mb-4">
<label for="password" class="sr-only">Passwort</label>
<input type="password" name="password" id="password" placeholder="Passwort"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="">
@error('password')
<div class="text-red-500 mt-2 text-sm">
$message
</div>
@enderror
</div>
<div class="mb-4">
<div class="flex items-center">
<input type="checkbox" name="remember" id="remember" class="mr-3">
<label for="remember">Remember me</label>
</div>
</div>
<div>
<button type="submit" class="bg-gradient-to-r from-green-400 to-blue-500 text-white px-4 py-3 rounded font-medium w-full">Login</button>
</div>
</form>
</div>
</div>
@endsection
这是不工作的页面：
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
<div class="w-3/6 bg-gray-400 bg-opacity-70 p-8 rounded-lg font-serif text-2xl font-bold">
@if (session('status'))
<div class="text justify-center bg-red-500 p-4 rounded-lg mb-6 text-white text-center">
session('status')
</div>
@endif
<form action=" route('portal_login') " method="post">
@csrf
<div class="mb-4">
<h1 class="flex justify-center mb-10"> Bewerbungsportal Login </h1>
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value=" old('email') ">
@error('email')
<div class="text-red-500 mt-2 text-sm">
$message
</div>
@enderror
</div>
<div class="mb-4">
<label for="password" class="sr-only">Passwort</label>
<input type="password" name="password" id="password" placeholder="Passwort"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="">
@error('password')
<div class="text-red-500 mt-2 text-sm">
$message
</div>
@enderror
</div>
<div class="mb-4">
<div class="flex items-center">
<input type="checkbox" name="remember" id="remember" class="mr-3">
<label for="remember">Remember me</label>
</div>
</div>
<div>
<button type="submit" class="bg-gradient-to-r from-green-400 to-blue-500 text-white px-4 py-3 rounded font-medium w-full">Login</button>
</div>
</form>
</div>
</div>
@endsection
这是来自 app.blade.php 的默认布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Finanzraketen</title>
<link rel="stylesheet" href=" asset('css/app.css') ">
<style>
.hintergrund
background: url('background.jpeg');
background-size: cover;
</style>
</head>
<body class="hintergrund">
<!-- Navbar goes here -->
<nav class="bg-white shadow-lg bg-gradient-to-r from-green-400 to-blue-500 mb-10">
<div class="max-w-full mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a href="#" class="flex items-center py-4 px-2">
<img src="rakete-2.png" class="h-8 w-8 mr-2">
<span class="font-semibold text-black text-lg">Finanzraketen</span>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
<ul class="flex items-center pl-10 grid grid-cols-6 gap-10">
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('home') " class="p-3">Home</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('overview') " class="p-3">Stellenanzeigen</a>
@auth()
<a href=" route('dashboard') " class="col-start-3 py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Dashboard</a>
<a href="" class="col-start-4 py-2 px-2 font-medium text-black rounded shadow transition border-gray-500
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"> auth()->user()->email </a>
<form action=" route('logout') " method="post" >
@csrf
<button type="submit" class="col-start-5 py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Logout</button>
</form>
@endauth
@guest
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('login') " class="p-3">Mitarbeiter Login</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('register') " class="p-3">Registrieren</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('portal_login') " class="p-3">Portal Login</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href=" route('portal_register') " class="p-3">Portal Registrieren</a>
@endguest
</ul>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class=" w-6 h-6 text-black hover:text-green-400"
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="hidden mobile-menu">
<ul class="">
<li> <a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href=" route('home') ">Home</a></li>
<li> <a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href=" route('overview') ">Stellenanzeigen</a> </li>
@auth()
<li>
<a href=" route('dashboard') " class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Dashboard</a>
</li>
<li>
<a href="" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300"> auth()->user()->email </a>
</li>
<li>
<form action=" route('logout') " method="post" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">
@csrf
<button type="submit">Logout</button>
</form>
</li>
@endauth
@guest
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href=" route('login') " class="p-3">Mitarbeiter Login</a>
</li>
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href=" route('register') " class="p-3">Registrieren</a>
</li>
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href=" route('portal_register') " class="p-3">Bewerbungsportal Login</a>
</li>
@endguest
</ul>
</div>
<script>
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () =>
menu.classList.toggle("hidden");
);
</script>
</nav>
@yield('content')
</body>
</html>
它们在代码方面是相同的，只是路线不同。他们甚至在同一个目录中
【问题讨论】：
不，因为我们看不到任何代码，这是我们除了和你玩 20 个问题之外的唯一方法 如果您更改了路径，那么一切都不相同最有可能的问题 欢迎，为了改善您在 SO 上的体验，请take the tour 并阅读how to ask、On Topic question，然后查看Question Check list、perfect question 以及如何创建@987654326 @ @RiggsFolly 我想改变任何路径。两个登录刀片都在同一目录中，它们也使用同一目录中的相同背景图像 你具体说 我只是从员工页面复制代码并更改路径 【参考方案1】：不起作用的新页面有一个“双”uri，如下所示：
Route::get('/portal/login', [PortalLoginController::class, 'showLoginForm'])->name('portal_login');
它工作的页面只有一个 uri，如下所示：
Route::get('/login', [LoginController::class, 'index'])->name('login');
我只需要添加一个额外的 / 到样式标签：
来自
<style>
.hintergrund
background-image: url('background.jpeg');
background-size: cover;
</style>
到：
<style>
.hintergrund
background-image: url('/background.jpeg');
background-size: cover;
</style>
【讨论】：
太棒了！！非常感谢您的正确回答，不知道为什么我不能！希望至少有一位开发人员在遇到相同问题时偶然发现这一点：D 那会很棒 你可以，如果你喜欢，我会在你删除“已接受”后删除它以添加到你的答案中 当我尝试发布它时说“我们不再接受来自此帐户的答案”：/ 也许如果您删除已接受的答案打勾，它会让您 或者可能是因为反对票以上是关于背景不会在具有相同代码的不同页面上加载的主要内容，如果未能解决你的问题，请参考以下文章
Jquery Mobile：“pageshow”事件仅在 Shift F5（完全重新加载）时触发，但在加载另一个页面或具有不同查询的同一页面时不会触发
两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗？