Laravel样式表和javascript不会加载非基本路由

问题描述 投票:88回答:17

好的 - 我知道这是一个非常基本的问题,但我无法弄清楚。这是关于Laravel的问题。

基本上,我将样式表嵌入到我的默认布局视图中。我目前只是使用常规css链接它们,例如:

<link rel="stylesheet" href="css/app.css" />

当我处于单级路线(例如/ about)时它很有效,但是当我走得更深时停止工作,例如/ about / me。

如果我查看Chrome的开发者控制台,我会看到以下一些错误(仅适用于更深的路线):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

很明显,它现在正在寻找“about”文件夹中的css - 当然这不是一个文件夹。

我只是想让它在同一个地方寻找资产而不管路线。

php laravel blade
17个回答
158
投票

对于Laravel 4和5:

<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">

URL::asset将链接到你的project/public/文件夹,所以把你的脚本放在那里。


Note: For this, you need to use the "Blade templating engine". Blade files use the .blade.php extension.

2
投票

Vinsa差不多对你应该添加

<base href="{{URL::asset('/')}}" target="_top">

和脚本应该在他们的常规路径中

<script src="js/jquery/jquery-1.11.1.min.js"></script>

这是因为如果没有附加基本路径,图像和具有相对路径的其他东西(如图像源或ajax请求)将无法正常工作。


2
投票

在Laravel 5.7中,将CSS或JS文件放入Public目录。

对于CSS:

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

对于JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>

1
投票

如果您对其进行硬编码,则应该使用完整路径(href="http://example.com/public/css/app.css")。但是,这意味着您必须手动调整开发和生产的URL。

上述解决方案的替代方案是在Laravel 3中使用<link rel="stylesheet" href="URL::to_asset('css/app.css')" />或在Laravel 4中使用<link rel="stylesheet" href="URL::asset('css/app.css')" />。这将允许您以您希望的方式编写HTML,但也让Laravel在任何环境中为您生成正确的路径。


1
投票

更好的使用方式,

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

1
投票

假设您尚未重命名公用文件夹。您的css和js文件位于公用文件夹中的css和js子文件夹中。现在您的标题将是:

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>

1
投票

只需添加另一个问题:

如果你想使用/public从项目中删除.htaccess

然后你可以使用这个,[在public /css之前添加asset()]

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

[有时,它很有用。]


0
投票

对于Laravel 4:{!!为双花括号{{ 对于Laravel 5及以上版本:您可以替换{!!通过{{和!!} by}}在高端版本中

如果已将JavaScript放在自定义目录中。 例如,如果您的jQuery-2.2.0.min.js位于resources/views/admin/plugins/js/目录下,那么从*.blade.php您可以在该部分的末尾添加为

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

由于高端版本也支持低端版本,但反之亦然


0
投票

更好,更正确的方法:

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

0
投票

在Laravel 5.8

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

只是为我做了伎俩。


0
投票

将您的脚本文件放在公共目录中然后使用(例如userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">

52
投票

Laravel 4

这样做的更好,更正确的方法

添加CSS

HTML :: style将链接到您的项目/ public /文件夹

{{ HTML::style('css/bootstrap.css') }}

添加JS

HTML :: script将链接到您的项目/ public /文件夹

{{ HTML::script('js/script.js') }}

11
投票

您正在使用资产的相对路径,更改为绝对路径,一切都将正常工作(在“css”之前添加斜杠。

<link rel="stylesheet" href="/css/app.css" />

9
投票

我认为你正在使用Laravel 3,如果是的话将你的CSS / JS文件放在公共文件夹中

public/css
public/js

并使用Blade模板调用它

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

9
投票

在Laravel 5, 有两种方法可以在视图中加载js文件 第一个是使用html助手,第二个是使用资产助手。 要使用html helper,你必须先通过命令行安装这个包:

composer require illuminate/html

然后你需要注册它,所以转到config / app.php,并将此行添加到providers数组

'Illuminate\Html\HtmlServiceProvider'

然后你必须为你的html包定义别名,所以转到config / app.php中的别名数组并添加它

'Html'     => 'Illuminate\Html\HtmlFacade'

现在您的html帮助程序已安装,因此在您的刀片视图文件中,您可以这样写:

{!! Html::script('js/test.js') !!}

这将在project_root / public / js / test.js中查找test.js文件。 ////////////////////////////////////////////////// //////////// 要使用资产助手而不是html助手,你必须在你的视图文件中写这样的东西:

<script src="{{ URL::asset('test.js') }}"></script>

这将在project_root / resources / assets / test.js中查找test.js文件


6
投票

我建议你在{project} /application/routes.php之前把它放在路由过滤器上

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

并使用刀片模板引擎

{{ Asset::styles() }}
{{ Asset::scripts(); }}

或者更多关于laravel managing assets docs


3
投票

laravel 4你只需要这样粘贴{{ URL::asset('/') }}

  <link rel="stylesheet" href="{{ URL::asset('/') }}css/app.css" />.

它是相同的:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">

3
投票

Laravel 5.4带混合助手:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>

2
投票

在我看来,最好的方法是在HTML中添加BASE标记

<base href="/" target="_top">

所以没有必要使用像

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

只需键入

<script src="js/jquery/jquery-1.11.1.min.js"></script>

在你的视图中它会起作用。

此方法将RESTful URL和静态资源作为图像,CSS,脚本处理。

© www.soinside.com 2019 - 2024. All rights reserved.