Question

我正在使用laravel创建网站。问题是CSS无法正常工作。 This is my css location in project structure

当我输入本地服务器ex时：

mysite.com/about

css加载完美。但是当我使用这种视图

mysite.com/about/mycontact

css无法加载。

这是我在主版式页面中的CSS

<!-- Favicon and Touch Icons -->
<link href="images/favicon.png" rel="shortcut icon" type="image/png">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">

<!-- Icon fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/flaticon.css" rel="stylesheet">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Plugins for this template -->
<link href="css/animate.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

这项工作以简单的方式进行。但不在深度链接视图中。我关注了其他有关使用资产助手的stackoverflow问题，但仍然无法正常工作。

我尝试使用此功能，但在深层链接上仍然无法使用

<!-- Favicon and Touch Icons -->
<link href="{{ asset('/images/favicon.png') }}" rel="shortcut icon" type="image/png">
<link href="{{ asset('/images/apple-touch-icon.png') }}" rel="apple-touch-icon">
<link href="{{ asset('/images/apple-touch-icon-72x72.png') }}" rel="apple-touch-icon" sizes="72x72">
<link href="{{ asset('/images/apple-touch-icon-114x114.png') }}" rel="apple-touch-icon" sizes="114x114">
<link href="{{ asset('/images/apple-touch-icon-144x144.png') }}" rel="apple-touch-icon" sizes="144x144">

<!-- Icon fonts -->
<link href="{{ asset('/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('/css/flaticon.css') }}" rel="stylesheet">

<!-- Bootstrap core CSS -->
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">

<!-- Plugins for this template -->
<link href="{{ asset('/css/animate.css') }}" rel="stylesheet">
<link href="{{ asset('/css/owl.carousel.css') }}" rel="stylesheet">
<link href="{{ asset('/css/owl.theme.css') }}" rel="stylesheet">
<link href="{{ asset('/css/owl.transitions.css') }}" rel="stylesheet">
<link href="{{ asset('/css/jquery.fancybox.css') }}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

那么我该如何解决此问题？我在互联网上找不到任何解决方案。所以我在这里。

Answer 1

使用URL的方式如下：

对于CSS：

<link rel="stylesheet" href="{{ url('css/font-awesome.min.css')}}">

对于图像：

<link href="{{ url('images/favicon.png') }}" rel="shortcut icon" type="image/png">

希望它会起作用，并且记住重要的事情总是使用布局（主，子）等。

如何在Laravel 5.6的深层链接中添加CSS？

1 个答案: