I fogli di stile Laravel e javascript non vengono caricati per rotte non di base

Ok, so che questa è una questione molto elementare, ma non riesco a capirla. Questa è una domanda che riguarda Laravel.

Fondamentalmente, ho i miei fogli di stile incorporati nella mia visualizzazione di layout predefinita. Al momento sto usando solo css regolari per collegarli, come ad esempio:

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

Funziona alla grande quando mi trovo su un percorso di livello singolo come / about , ma smette di funzionare quando vado più in profondità, come / about / me .

Se guardo la console per sviluppatori di Chrome vedo alcuni dei seguenti errori (solo per i percorsi più profondi):

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

Quindi chiaramente ora sta cercando il css all'interno della cartella "about" - che ovviamente non è affatto una cartella.

Voglio solo che cerchi le risorse nello stesso posto indipendentemente dal percorso.

Per Laravel 4 e 5:

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

URL::assetsi collegherà alla tua project/public/cartella, quindi inserisci i tuoi script lì dentro.

Laravel 4

Il modo migliore e corretto per farlo

Aggiunta di CSS

HTML :: style si collegherà al tuo progetto / public / cartella

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

Aggiunta di JS

HTML :: script si collegherà al tuo progetto / public / cartella

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

Stai usando percorsi relativi per le tue risorse, cambia in un percorso assoluto e tutto funzionerà (aggiungi una barra prima di "css".

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

in Laravel 5 ,
ci sono 2 modi per caricare un file js nella tua vista, il
primo sta usando l'helper html, il secondo sta usando gli helper delle risorse.
per utilizzare l'helper html devi prima installare questo pacchetto tramite riga di comando:

composer require illuminate/html

quindi è necessario richiederlo, quindi vai a config / app.php e aggiungi questa riga all'array dei provider

'Illuminate\Html\HtmlServiceProvider'

quindi devi definire gli alias per il tuo pacchetto html quindi vai all'array degli alias in config / app.php e aggiungi questo

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

ora il tuo helper html è installato quindi nei tuoi file di visualizzazione blade puoi scrivere questo:

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

questo cercherà il tuo file test.js nel tuo project_root / public / js / test.js.
////////////////////////////////////////////////// ////////////
per utilizzare gli helper delle risorse invece dell'helper html, devi scrivere sth in questo modo nei tuoi file di visualizzazione:

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

questo cercherà il file test.js in project_root / resources / assets / test.js

Se stai usando Laravel 3 ei tuoi file CSS / JS all'interno di una cartella pubblica come questa

public/css
public/js

quindi puoi chiamarli usando nei modelli Blade come questo

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

ti suggerisco di metterlo sul filtro di rotta prima su {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');

});

e utilizzando il motore del modello blade

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

o più su laravel che gestisce i documenti delle risorse

in laravel 4devi solo incollare in {{ URL::asset('/') }}questo modo:

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

È lo stesso per:

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

Laravel 5.4 con mix helper:

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

In Laravel 5.7, metti il ​​tuo file CSS o JS nella directory pubblica.

Per CSS:

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

Per JS:

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

Il modo migliore a mio avviso aggiungere il tag BASE nel tuo HTML

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

Quindi non è necessario usare cose come

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

basta digitare

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

secondo te e funzionerà.

Questo metodo si occuperà di URL RESTful e risorse statiche come immagini, css, script.

Vinsa aveva quasi ragione, dovresti aggiungere

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

e gli script dovrebbero andare nel loro percorso regolare

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

la ragione di ciò è perché le immagini e altre cose con percorso relativo come l'origine dell'immagine o le richieste ajax non funzioneranno correttamente senza il percorso di base allegato.

Se lo fai hard code, dovresti probabilmente usare il percorso completo ( href="http://example.com/public/css/app.css"). Tuttavia, questo significa che dovrai modificare manualmente gli URL per lo sviluppo e la produzione.

Un'alternativa alle soluzioni di cui sopra potrebbe essere quella di utilizzare <link rel="stylesheet" href="URL::to_asset('css/app.css')" />in Laravel 3 o <link rel="stylesheet" href="URL::asset('css/app.css')" />in Laravel 4. Ciò ti consentirà di scrivere il tuo codice HTML nel modo desiderato, ma consentirà anche a Laravel di generare il percorso corretto per te in qualsiasi ambiente.

Modo migliore per usare come,

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

Supponi di non aver rinominato la tua cartella pubblica. I tuoi file css e js si trovano nelle sottocartelle css e js nella cartella pubblica. Ora la tua intestazione sarà:

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

Basta aggiungere un altro problema:

Se vuoi rimuovere /publicdal tuo progetto usando .htaccess,

allora puoi usare questo, [Aggiungi publicprima di /cssdentro asset()]

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

[A volte, è utile.]

Per Laravel 4: {!! per una doppia parentesi graffa {{
e per Laravel 5 e versioni successive: puoi sostituire {!! di {{e !!} di}} nella versione di fascia alta

Se hai inserito JavaScript in una directory definita personalizzata.
Ad esempio, se il tuo jQuery-2.2.0.min.jsè posizionato nella directoryresources/views/admin/plugins/js/ da *.blade.phppotrai aggiungere alla fine della sezione come

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

Poiché la versione Higher-End supporta anche la versione Lower-End e ma non viceversa

Il modo migliore e corretto per farlo:

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

In Laravel 5.8

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

ha appena fatto il trucco per me.

metti il ​​tuo file di script nella directory pubblica quindi usa (ad esempio per userFunctions.js)

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