web-dev-qa-db-fra.com

Les feuilles de style Laravel et javascript ne se chargent pas pour les itinéraires autres que de base

Okay - Je sais que c'est une question très élémentaire, mais je ne peux pas le comprendre. C'est une question concernant Laravel.

Fondamentalement, mes feuilles de style sont intégrées à ma présentation par défaut. J'utilise actuellement des fichiers CSS normaux pour les lier, tels que:

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

Cela fonctionne très bien lorsque je suis sur un itinéraire à un seul niveau tel que/à propos de , mais cesse de fonctionner lorsque je vais plus loin, tel que/à propos de/moi .

Si je regarde la console pour développeurs de Chrome, je vois certaines des erreurs suivantes (uniquement pour les routes plus profondes):

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

Il est donc clair que le css se trouve maintenant dans le dossier "à propos de", ce qui n’est bien sûr pas un dossier.

Je veux juste qu'il cherche au même endroit les biens quel que soit l'itinéraire.

phplaravelblade
85
Pete

Pour Laravel 4 & 5:

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

URL::asset sera lié à votre dossier project/public/, alors envoyez vos scripts dedans .

Remarque: Pour cela, vous devez utiliser le " Blade Templating Engine ". Les fichiers de lames utilisent l'extension .blade.php.

153
gan

Laravel 4

La meilleure façon de faire cela

Ajout de CSS

HTML :: style sera lié à votre projet/public/dossier

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

Ajout de JS

HTML :: script sera lié à votre projet/public/dossier

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

Vous utilisez des chemins relatifs pour vos actifs, passez à un chemin absolu et tout fonctionnera (ajoutez une barre oblique avant "css").

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

à Laravel 5 ,
il y a 2 façons de charger un fichier js dans votre vue
le premier utilise l'aide de HTML, le deuxième utilise les aides de capitaux.
pour utiliser html helper, vous devez d’abord installer ce paquet via la ligne de commande:

composer require illuminate/html

alors vous devez le réenregistrer, alors allez dans config/app.php, et ajoutez cette ligne au tableau de fournisseurs

'Illuminate\Html\HtmlServiceProvider'

alors vous devez définir des alias pour votre paquet html alors allez dans le tableau des alias dans config/app.php et ajoutez ceci

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

votre assistant HTML est maintenant installé, vous pouvez donc écrire ceci dans vos fichiers de vue de lame:

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

cela cherchera votre fichier test.js dans votre racine_projet/public/js/test.js.
/////////////////////////////////////////////////// ///////////////
pour utiliser des assistants de ressources au lieu de html helper, vous devez écrire qc comme ceci dans vos fichiers de vue:

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

cela cherchera le fichier test.js dans racine_projet/resources/assets/test.js

9
Salar

Je suppose que vous utilisez Laravel 3, si oui, mettez vos fichiers CSS/JS dans un dossier public comme

public/css
public/js

et appelez-le en utilisant des modèles de lame

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

je vous suggère de le mettre sur le filtre de route avant le {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');

});

et en utilisant le moteur de gabarit de lame

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

ou plus sur laravel gestion des actifs docs

6
Andry Yosua

Laravel 5.4 avec assistant de mixage:

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

Dans Laravel 5.7, placez votre fichier CSS ou JS dans le répertoire public.

Pour CSS:

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

Pour JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
2
Innocent TRA BI Le disciple

dans laravel 4 il vous suffit de coller {{ URL::asset('/') }} de cette façon: 

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

C'est pareil pour:

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

Vinsa avait presque raison Vous devriez ajouter 

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

et les scripts doivent aller dans leur chemin habituel 

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

la raison en est que les images et autres éléments ayant un chemin relatif, tel que des requêtes source ou ajax, ne fonctionneront pas correctement sans le chemin de base associé.

2
Cptmaxon

Le meilleur moyen à mon avis d'ajouter une balise BASE dans votre code HTML

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

Donc, il n'est pas nécessaire d'utiliser des choses comme 

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

il suffit de taper

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

à votre avis et cela fonctionnera.

Cette méthode traitera des URL RESTful et des ressources statiques sous forme d'images, de CSS, de scripts.

2
vinsa

Meilleure façon d'utiliser comme,

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

Si vous le codez en dur, vous devriez probablement utiliser le chemin complet (href="http://example.com/public/css/app.css"). Toutefois, cela signifie que vous devrez ajuster manuellement les URL pour le développement et la production.

Une alternative aux solutions ci-dessus serait d'utiliser <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> dans Laravel 3 ou <link rel="stylesheet" href="URL::asset('css/app.css')" /> dans Laravel 4. Cela vous permettra d'écrire votre code HTML comme vous le souhaitez, mais également de laisser Laravel générer le chemin approprié pour vous, quel que soit l'environnement. 

1
mckendricks

Supposons que vous n’ayez pas renommé votre dossier public. Vos fichiers css et js se trouvent dans les sous-dossiers css et js du dossier public. Maintenant, votre entête sera: 

<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

Il suffit d'ajouter un autre numéro:

Si vous souhaitez supprimer /public de votre projet à l'aide de .htaccess, 

alors vous pouvez utiliser ceci, [Ajouter public avant /css dans asset()]

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

[Parfois, c'est utile.]

1
Maniruzzaman Akash

Dans Laravel 5.8

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

vient de faire le tour pour moi.

0
oceceli

Pour Laravel 4: {!! pour une double accolade {{ 
et pour Laravel 5 et versions supérieures: vous pouvez remplacer {!! par {{et !!} par}} en version haut de gamme

Si vous avez placé JavaScript dans un répertoire personnalisé défini.
Par exemple, si votrejQuery-2.2.0.min.jsest placé dans le répertoireresources/views/admin/plugins/js/, à partir du*.blade.php, vous pourrez ajouter à la fin de la section

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

Étant donné que la version haut de gamme prend également en charge la version bas de gamme et non l'inverse.

0
Nishanth ॐ

mettez votre fichier de script dans le répertoire public puis utilisez-le (par exemple pour userFunctions.js)

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

La meilleure façon de faire ceci:

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