Laravel樣式表和JavaScript不會加載非基本路由

好吧 - 我知道這是一個非常基本的問題，但我無法弄清楚。 這是一個關於Laravel的問題。Laravel樣式表和JavaScript不會加載非基本路由

基本上，我有我的樣式表嵌入我的默認佈局視圖。我目前只使用普通的CSS將它們連接，如：

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

它當我在一個級別途徑，如/約的偉大工程，但停止工作，當我去更深，如/about/me。

如果我看Chrome的開發者控制檯，我看到一些以下錯誤（僅適用於更深層次的路由）的：

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

所以很明顯它現在裏面的「關於」 folder--尋找CSS這當然不是一個文件夾。

我只是希望它在相同的地方尋找資產，不管路線如何。

來源

2013-03-05 Pete

138

對於Laravel 4 & 5：

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

網址::資產將鏈接到您項目/公/文件夾，所以在那裏扔掉你的腳本。

注意：您需要使用刀片模板才能使用它。所有刀片模板應使用.blade.php擴展名。

來源

2013-05-15 12:58:11 gan

只是確認它在** Laravel 5和5.1 **中也有效。謝謝。 – 2015-06-15 11:35:28

我已經創建了自己的包。我可以在裏面有css嗎？如果是這樣，我如何從自己的包中包含css？ – 2016-07-15 16:25:39

你也可以使用'URL :: asset（）'中的'asset（）'輔助方法。它做同樣的工作。 – 2016-11-06 18:06:59

我supuse你使用Laravel 3，如果是把你的CSS/JS文件公用文件夾像

public/css 
public/js

，並使用刀片模板調用它

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

來源

2013-03-05 20:47:05

您使用相對路徑爲您的資產，改變到一個絕對路徑，一切都會工作（在「css」之前添加一個斜槓。）

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

來源

2013-03-05 20:50:27

如果您的應用位於網站的子目錄中，這將不起作用。然後，您會遇到您對資產看起來太遠的問題。我的建議是使用@Chris提供的解決方案。這消除了所有猜測，並允許您將應用程序移到任何地方，並確保它能正確加載資產。 – 2013-07-29 19:05:28

如果您對其進行了硬編碼，則應該使用完整路徑（href="http://example.com/public/css/app.css"）。但是，這意味着您必須手動調整開發和生產的URL。

的替代上述解決方案是使用<link rel="stylesheet" href="URL::to_asset('css/app.css')" />在Laravel 3或<link rel="stylesheet" href="URL::asset('css/app.css')" />在Laravel 4.這將讓你寫你的HTML你想要的方式，也讓Laravel爲您生成在任何合適的路徑環境。

來源

2013-03-06 06:15:58 mckendricks

我建議你把它放在{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

來源

2013-05-22 04:16:53

是的，這個新的laravel使一切變得複雜，資產，甚至profiler都不在文檔中了。 – 2013-07-09 03:41:08

Laravel 4

更好的和正確的方式來做到這一點

添加CSS

HTML ::風格會鏈接到你的項目/公/文件夾

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

添加JS

HTML ::腳本將鏈接到項目/公/文件夾

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

來源

2013-09-29 13:50:03 mXX

在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">

來源

2014-03-12 07:46:39 fravemel

在我看來

最佳方式在你的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>

在你看來

，它會工作。

這mehod將處理REST風格的URL和靜態資源圖片，CSS，腳本。

來源

2014-11-01 23:34:01 vinsa

在Laravel 5，
有2種方式來加載一個js文件在你看來
首先是使用HTML幫手，第二種是通過資產的幫手。
使用HTML幫助，您必須通過命令行先安裝這個包：

composer require illuminate/html

那麼你需要reqister它，所以去的config/app.php，這行添加到供應商陣列

'Illuminate\Html\HtmlServiceProvider'

那麼你必須爲你的html包定義別名，所以去config/app中的別名數組。PHP和添加此

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

現在你的HTML輔助安裝因此刀片的視圖文件，你可以這樣寫：

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

這將尋找你的test.js文件在您project_root /公共/ JS/test.js。
//////////////////////////////////////////////// //////////////
使用資產的幫手，而不是HTML幫手，你必須寫某事像這樣在視圖文件：

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

這將尋找測試.js文件中project_root /資源/資產/ test.js文件

來源

2015-05-03 07:42:08 Salar

illuminate/html已被放棄。用戶laravelcollective/html代替。 – geoidesic 2017-03-08 10:17:44

您也可以使用''如果你使用的是Laravel Mix）。 – snipe 2017-09-25 22:59:12

Vinsa幾乎擁有了正確的你應該添加

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

個腳本應該在他們的常規路徑

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

這樣做的原因是因爲圖像和其他事情一樣的圖像源或Ajax請求的相對路徑不會不附帶的基本路徑正常工作。

來源

2016-01-06 10:44:36 Cptmaxon

Laravel 5.4混合幫手：

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

來源

2017-04-01 00:08:43 Gsub

更好的方式來使用像，

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

來源

2017-05-09 11:24:18

假設你已經不重命名公用文件夾。您的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>

來源

2017-05-30 03:45:24

只需添加另外一個問題：如果你想使用.htaccess刪除從項目/public

，

那麼你可以使用這個，[前添加public/css裏面asset()]

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

[有時，它很有用。]

來源

2017-10-20 01:56:44

Laravel樣式表和JavaScript不會加載非基本路由

回答

相關問題