Laravel-Stylesheets und Javascript werden für Routen ohne Basis nicht geladen

97

Okay - ich weiß, dass dies ein wirklich elementares Problem ist, aber ich kann es nicht herausfinden. Dies ist eine Frage zu Laravel.

Grundsätzlich habe ich meine Stylesheets in meine Standardlayoutansicht eingebettet. Ich verwende derzeit nur reguläres CSS, um sie zu verlinken, wie zum Beispiel:

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

Es funktioniert hervorragend, wenn ich mich auf einer einstufigen Route wie / about befinde, funktioniert aber nicht mehr, wenn ich tiefer gehe, wie / about / me .

Wenn ich mir die Entwicklerkonsole von Chrome ansehe, werden einige der folgenden Fehler angezeigt (nur für die tieferen Routen):

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

Es ist also klar, dass jetzt nach dem CSS im Ordner "about" gesucht wird - was natürlich überhaupt kein Ordner ist.

Ich möchte nur, dass es unabhängig von der Route an derselben Stelle nach den Assets sucht.

Pete
quelle

Antworten:

168

Für Laravel 4 & 5:

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

URL::assetwird auf Ihren project/public/Ordner verlinken , also werfen Sie Ihre Skripte dort hinein.


Hinweis: Dazu müssen Sie die " Blade Templating Engine " verwenden. Blade-Dateien verwenden die .blade.phpErweiterung.

gan
quelle
8
Nur bestätigen, dass es auch in Laravel 5 und 5.1 funktioniert . Danke dir.
Filip Filipović
1
Ich habe mein eigenes Paket erstellt. Kann ich CSS darin haben? Wenn ja, wie kann ich CSS aus meinem eigenen Paket einbinden?
Chourn Solidet
Sie können auch die asset()Hilfsmethode Instant of verwenden URL::asset(). Es macht die gleiche Arbeit.
Marek Skiba
3
Funktioniert auch in Laravel 5.4 .
user3426112
Was ist, wenn Sie die minimierte Version in der Produktion, aber nicht in der Entwicklung haben möchten?
Geoidesic
52

Laravel 4

Der bessere und korrekte Weg, dies zu tun

CSS hinzufügen

HTML :: style wird mit Ihrem Projekt / public / folder verknüpft

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

JS hinzufügen

HTML :: script wird mit Ihrem Projekt / public / folder verknüpft

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

Sie verwenden relative Pfade für Ihre Assets, wechseln zu einem absoluten Pfad und alles wird funktionieren (fügen Sie vor "css" einen Schrägstrich hinzu.

<link rel="stylesheet" href="/css/app.css" />
Alexandre Danault
quelle
Dies funktioniert nicht, wenn sich Ihre App in einem Unterverzeichnis der Site befindet. Dann stoßen Sie auf das Problem, bei dem Sie zu weit zurück nach Ihrem Vermögen suchen. Meine Empfehlung ist, die bereitgestellte Lösung @Chris zu verwenden. Dies eliminiert ALLE Vermutungen und ermöglicht es Ihnen, Ihre App überall hin zu verschieben und trotzdem sicherzustellen, dass Assets korrekt geladen werden.
Tim F
10

in Laravel 5 ,
gibt es 2 Möglichkeiten , eine js - Datei in Ihrer Ansicht laden
wird unter Verwendung eines ersten html Helfer, zweite Asset Helfer verwendet.
Um den HTML-Helfer zu verwenden, müssen Sie dieses Paket zuerst über die Befehlszeile installieren:

composer require illuminate/html

Dann müssen Sie es erneut anfordern. Gehen Sie also zu config / app.php und fügen Sie diese Zeile dem Provider-Array hinzu

'Illuminate\Html\HtmlServiceProvider'

Dann müssen Sie Aliase für Ihr HTML-Paket definieren. Gehen Sie also zum Aliase-Array in config / app.php und fügen Sie dieses hinzu

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

Jetzt ist Ihr HTML-Helfer installiert, sodass Sie Folgendes in Ihre Blade-View-Dateien schreiben können:

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

Dadurch wird nach Ihrer Datei test.js in Ihrer project_root / public / js / test.js gesucht.
///////////////////////////////////////////////////////// //////////// Um
Asset-Helfer anstelle des HTML-Helfers zu verwenden, müssen Sie etw wie folgt in Ihre Ansichtsdateien schreiben:

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

Dadurch wird nach der Datei test.js in project_root / resources / assets / test.js gesucht

Salar
quelle
illuminate / html wurde aufgegeben. Benutzer laravelcollective / html stattdessen.
Geoidesic
Sie können auch verwenden <script src="{{ url(asset('test.js')) }}"></script>(oder <script src="{{ url(mix('test.js')) }}"></script>wenn Sie Laravel Mix verwenden).
Snipe
9

Wenn Sie Laravel 3 und Ihre CSS / JS-Dateien in einem öffentlichen Ordner wie diesem verwenden

public/css
public/js

Dann können Sie sie in solchen Blade-Vorlagen aufrufen

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

Ich schlage vor, Sie setzen es auf Route Filter vor {Projekt} /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');

});

und Verwenden der Blade Template Engine

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

oder mehr über die Verwaltung von Assets-Dokumenten

Andry Yosua
quelle
Ja, diese neue Laravel macht alles kompliziert, Assets, sogar Profiler sind nicht mehr dokumentiert.
Andry Yosua
3

in müssen laravel 4Sie nur so einfügen {{ URL::asset('/') }}:

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

Es ist dasselbe für:

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

Laravel 5.4 mit Mix-Helfer:

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

Legen Sie in Laravel 5.7 Ihre CSS- oder JS-Datei im öffentlichen Verzeichnis ab.

Für CSS:

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

Für JS:

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

Der beste Weg meiner Meinung nach, BASE-Tag in Ihren HTML-Code einzufügen

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

Es ist also nicht notwendig, Dinge wie zu verwenden

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

Schreib einfach

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

aus Ihrer Sicht und es wird funktionieren.

Diese Methode behandelt RESTful-URLs und statische Ressourcen als Bilder, CSS und Skripte.

vinsa
quelle
2

Vinsa hatte es fast richtig, sollten Sie hinzufügen

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

und Skripte sollten ihren regulären Weg gehen

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

Der Grund dafür ist, dass Bilder und andere Dinge mit einem relativen Pfad wie Bildquelle oder Ajax-Anforderungen ohne den angehängten Basispfad nicht richtig funktionieren.

Cptmaxon
quelle
1

Wenn Sie es hart codieren, sollten Sie wahrscheinlich den vollständigen Pfad verwenden (href="http://example.com/public/css/app.css" ) verwenden. Dies bedeutet jedoch, dass Sie die URLs für Entwicklung und Produktion manuell anpassen müssen.

Eine Alternative zu den oben genannten Lösungen wäre die Verwendung <link rel="stylesheet" href="URL::to_asset('css/app.css')" />in Laravel 3 oder <link rel="stylesheet" href="URL::asset('css/app.css')" />Laravel 4. Auf diese Weise können Sie Ihren HTML-Code so schreiben, wie Sie es möchten, aber Laravel kann in jeder Umgebung den richtigen Pfad für Sie generieren.

mckendricks
quelle
1

Besserer Weg, wie zu verwenden,

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

Angenommen, Sie haben Ihren öffentlichen Ordner nicht umbenannt. Ihre CSS- und JS-Dateien befinden sich in CSS- und JS-Unterordnern im öffentlichen Ordner. Jetzt lautet Ihr Header:

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

Fügen Sie einfach ein weiteres Problem hinzu:

Wenn Sie mit /publicaus Ihrem Projekt entfernen möchten .htaccess,

dann können Sie dies verwenden, [ publicVorher hinzufügen /cssinnen asset()]

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

[Manchmal ist es nützlich.]

Maniruzzaman Akash
quelle
0

Für Laravel 4: {!! für eine doppelte geschweifte Klammer {{
und für die Version ab Laravel 5: Sie können {!! von {{und !!} von}} in der High-End-Version

Wenn Sie JavaScript in einem benutzerdefinierten Verzeichnis abgelegt haben.
Zum Beispiel, wenn Ihr jQuery-2.2.0.min.jsunter dem Verzeichnis gespeichert , resources/views/admin/plugins/js/dann von der *.blade.phpwerden Sie am Ende des Abschnitts hinzufügen können , wie

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

Da die Higher-End-Version auch die Lower-End-Version unterstützt und nicht umgekehrt

Nɪsʜᴀɴᴛʜ ॐ
quelle
0

Der bessere und korrekte Weg, dies zu tun:

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

In Laravel 5.8

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

habe gerade den Trick für mich gemacht.

oceceli
quelle
0

Legen Sie Ihre Skriptdatei in einem öffentlichen Verzeichnis ab und verwenden Sie sie (z. B. für userFunctions.js).

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

quelle