Stylesheet laravel dan javascript tidak dimuat untuk rute non-basis

97

Oke - Saya tahu ini masalah yang sangat mendasar, tapi saya tidak bisa memahaminya. Ini pertanyaan tentang Laravel.

Pada dasarnya, saya memiliki lembar gaya yang disematkan dalam tampilan tata letak default saya. Saat ini saya hanya menggunakan css biasa untuk menautkannya, seperti:

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

Ini berfungsi dengan baik saat saya berada di rute tingkat tunggal seperti / tentang , tetapi berhenti berfungsi saat saya masuk lebih dalam, seperti / tentang / saya .

Jika saya melihat konsol pengembang Chrome, saya melihat beberapa kesalahan berikut (hanya untuk rute yang lebih dalam):

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

Jadi jelas sekarang mencari css di dalam folder "tentang" - yang tentu saja bukan folder sama sekali.

Saya hanya ingin melihat aset di tempat yang sama terlepas dari rutenya.

php  laravel  blade 
— Pete
sumber

Jawaban:

169

Untuk Laravel 4 & 5:

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

URL::assetakan menautkan ke project/public/folder Anda , jadi buang skrip Anda di sana.

Catatan: Untuk ini, Anda perlu menggunakan " Mesin templating blade ". File Blade menggunakan .blade.phpekstensi.

— gan
sumber
8
Hanya mengonfirmasi bahwa itu berfungsi di Laravel 5 dan 5.1 juga. Terima kasih.
— Filip Filipović
1
Saya telah membuat paket saya sendiri. dapatkah saya memiliki css di dalamnya? jika ya, bagaimana saya bisa menyertakan css dari paket saya sendiri?
— chourn solidet
Anda juga dapat menggunakan asset()metode pembantu instan URL::asset(). Itu melakukan pekerjaan yang sama.
— Marek Skiba
3
Bekerja di Laravel 5.4 juga.
— pengguna3426112
Bagaimana jika Anda menginginkan versi minified pada produksi tetapi tidak dalam pengembangan?
— geoidesic
52

Laravel 4

Cara yang lebih baik dan benar untuk melakukan ini

Menambahkan CSS

HTML :: style akan ditautkan ke folder proyek / publik / Anda

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

Menambahkan JS

HTML :: script akan ditautkan ke folder proyek / publik / Anda

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

Anda menggunakan jalur relatif untuk aset Anda, ubah ke jalur absolut dan semuanya akan berfungsi (tambahkan garis miring sebelum "css".

<link rel="stylesheet" href="/css/app.css" />
— Alexandre Danault
sumber
Ini tidak akan berfungsi jika aplikasi Anda terletak di subdirektori situs. Kemudian Anda mengalami masalah di mana Anda mencari terlalu jauh ke belakang untuk aset Anda. Rekomendasi saya adalah menggunakan solusi yang disediakan @Chris. Ini menghilangkan SEMUA dugaan, dan memungkinkan Anda untuk memindahkan aplikasi Anda ke mana saja, dan tetap memastikan bahwa itu akan memuat aset dengan benar.
— Tim F
10

di Laravel 5 ,
ada 2 cara untuk memuat file js di tampilan Anda
pertama adalah menggunakan helper html, kedua menggunakan pembantu aset.
untuk menggunakan html helper Anda harus menginstal paket ini terlebih dahulu melalui commandline:

composer require illuminate/html

maka Anda perlu mendaftarkannya kembali, jadi buka config / app.php, dan tambahkan baris ini ke array penyedia

'Illuminate\Html\HtmlServiceProvider'

maka Anda harus mendefinisikan alias untuk paket html Anda, jadi buka aliases array di config / app.php dan tambahkan ini

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

sekarang helper html Anda diinstal sehingga di file tampilan blade Anda, Anda dapat menulis ini:

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

ini akan mencari file test.js Anda di project_root / public / js / test.js.
//////////////////////////////////////////////// ////////////
untuk menggunakan asset helper sebagai ganti html helper, Anda harus menulis sth seperti ini di file view Anda:

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

ini akan mencari file test.js di project_root / resources / assets / test.js

— Salar
sumber
illuminate / html telah ditinggalkan. Gunakan laravelcollective / html sebagai gantinya.
— geoidesic
Anda juga dapat menggunakan <script src="{{ url(asset('test.js')) }}"></script>(atau <script src="{{ url(mix('test.js')) }}"></script>jika Anda menggunakan Laravel Mix).
— berkik
9

Jika Anda menggunakan Laravel 3 dan file CSS / JS Anda di dalam folder publik seperti ini

public/css
public/js

lalu Anda dapat memanggil mereka menggunakan template Blade seperti ini

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

saya sarankan Anda meletakkannya di filter rute sebelum di {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');

});

dan menggunakan mesin template blade

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

atau lebih lanjut tentang dokumen pengelolaan aset tingkat

— Andry Yosua
sumber
ya, laravel baru ini bikin semuanya jadi ribet, aset, bahkan profiler sudah tidak ada di dokumentasi lagi ..
— Andry Yosua
3

di laravel 4Anda hanya perlu menempelkan {{ URL::asset('/') }}cara ini: 

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

Itu sama untuk:

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

Laravel 5.4 dengan mix helper:

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

Di Laravel 5.7, masukkan file CSS atau JS Anda ke direktori Publik.

Untuk CSS:

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

Untuk JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
— TRA BI tidak bersalah
sumber
2

Cara terbaik menurut saya adalah menambahkan tag BASE di HTML Anda

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

Jadi tidak perlu menggunakan hal-hal seperti 

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

ketik saja

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

dalam pandangan Anda dan itu akan berhasil.

Metode ini akan menangani URL RESTful dan sumber daya statis sebagai gambar, css, skrip.

— vinsa
sumber
2

Vinsa hampir benar, Anda harus menambahkan 

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

dan skrip harus berada di jalur regulernya 

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

alasan untuk ini adalah karena Gambar dan hal-hal lain dengan jalur relatif seperti sumber gambar atau permintaan ajax tidak akan berfungsi dengan benar tanpa jalur dasar terpasang.

— Cptmaxon.dll
sumber
1

Jika Anda melakukan kode keras, Anda mungkin harus menggunakan jalur lengkap (href="http://example.com/public/css/app.css" ). Namun, ini berarti Anda harus menyesuaikan URL secara manual untuk pengembangan dan produksi.

Alternatif solusi di atas akan digunakan <link rel="stylesheet" href="URL::to_asset('css/app.css')" />di Laravel 3 atau <link rel="stylesheet" href="URL::asset('css/app.css')" />di Laravel 4. Ini akan memungkinkan Anda untuk menulis HTML seperti yang Anda inginkan, tetapi juga membiarkan Laravel menghasilkan jalur yang tepat untuk Anda di lingkungan mana pun.

— mckendricks
sumber
1

Cara yang lebih baik untuk menggunakan seperti,

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

Misalkan Anda belum mengganti nama folder publik Anda. File css dan js Anda ada di subfolder css dan js di folder publik. Sekarang tajuk Anda akan menjadi:

<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
sumber
1

Tambahkan Masalah Lain:

Jika Anda ingin menghapus /publicdari proyek Anda menggunakan .htaccess,

maka Anda dapat menggunakan ini, [Tambahkan publicsebelum /cssdi dalam asset()]

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

[Terkadang, itu berguna.]

— Maniruzzaman Akash
sumber
0

Untuk Laravel 4: {!! untuk penjepit keriting ganda {{
dan untuk Laravel 5 & versi di atasnya: Anda dapat mengganti {!! oleh {{and !!} by}} dalam versi yang lebih canggih

Jika Anda telah menempatkan JavaScript di direktori yang ditentukan khusus.
Misalnya, jika Anda jQuery-2.2.0.min.jsditempatkan di bawah direktori resources/views/admin/plugins/js/maka dari itu *.blade.phpAnda akan dapat menambahkan di akhir bagian sebagai

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

Karena versi High-End mendukung versi Lower-End juga dan tetapi tidak sebaliknya

— Nɪsʜᴀɴᴛʜ ॐ
sumber
0

Cara yang lebih baik dan benar untuk melakukan ini:

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

Di Laravel 5.8

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

baru saja membuat trik untuk saya.

— oceceli.dll
sumber
0

letakkan file skrip Anda di direktori publik lalu gunakan (misalnya untuk userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.