web-dev-qa-db-ja.com

Laravelスタイルシートとjavascriptは、非ベースルートに対してロードされません

さて、これは本当に初歩的な問題であることは知っていますが、わかりません。 これは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を探しています。もちろん、これはフォルダーではありません。

ルートに関係なく、同じ場所でアセットを探したいだけです。

phplaravelblade
89
Pete

Laravel 4および5の場合：

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

URL::assetはproject/public/フォルダーにリンクします、スクリプトをそこにチャックします。

注：このためには、「 Blade templating engine 」を使用する必要があります。ブレードファイルは.blade.php拡張子を使用します。
157
gan

Laravel 4

これを行うためのより良い正しい方法

CSSの追加

HTML :: styleは、project/public /フォルダーにリンクします

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

JSの追加

HTML :: scriptは、project/public /フォルダーにリンクします

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

アセットに相対パスを使用しており、絶対パスに変更するとすべてが機能します（「css」の前にスラッシュを追加します）。

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

in Laravel 5、
ビューにjsファイルをロードするには2つの方法があります
最初はhtmlヘルパーを使用し、2番目はアセットヘルパーを使用します。
htmlヘルパーを使用するには、最初にコマンドラインでこのパッケージをインストールする必要があります。

composer require illuminate/html

その後、それを要求する必要があるので、config/app.phpに移動し、この行をプロバイダー配列に追加します

'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ヘルパーの代わりにアセットヘルパーを使用するには、ビューファイルに次のようなsthを記述する必要があります。

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

これは、project_root/resources/assets/test.jsでtest.jsファイルを探します

9
Salar

Laravel 3を使用していると思います。はいの場合、CSS/JSファイルを

public/css
public/js

bladeテンプレートを使用して呼び出します

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

{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管理資産ドキュメント 以上

6
Andry Yosua

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
fravemel

混合ヘルパーを備えたLaravel 5.4：

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

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>
2
Innocent TRA BI Le disciple

あなたが追加する必要がありますビンサはほとんどそれを正しく持っていました

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

スクリプトは通常のパスに配置する必要があります

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

これは、画像や、画像ソースやajaxリクエストなどの相対パスを持つその他のものは、ベースパスが添付されていないと正しく機能しないためです。

2
Cptmaxon

私の意見では最良の方法はあなたの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、スクリプトとして扱います。

2
vinsa

のように使用するより良い方法、

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

ハードコーディングする場合は、おそらくフルパス（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
mckendricks

パブリックフォルダーの名前を変更していないとします。 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
Hafsul Maru

ちょうど別の問題を追加：

/publicを使用してプロジェクトから.htaccessを削除する場合、

次に、これを使用できます。[asset()内の/cssの前にpublicを追加]

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

[時には便利です。]

1
Maniruzzaman Akash

Laravel 5.8で

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

ちょうど私のためのトリックを作りました。

0
oceceli

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>

Higher-EndバージョンはLower-Endバージョンもサポートしますが、逆はサポートしません。

0
Nishanth ॐ

スクリプトファイルをパブリックディレクトリに配置してから使用します（userFunctions.jsなど）

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

これを行うより良い正しい方法：

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