Laravel stylesheets and javascript don't load for non-base routes
PhpLaravelBladePhp Problem Overview
Okay--I know this is a really elementary issue, but I can't figure it out. This is a question regarding Laravel.
Basically, I have my stylesheets embedded in my default layout view. I'm currently just using regular css to link them, such as:
<link rel="stylesheet" href="css/app.css" />
It works great when I am at a single level route such as /about, but stops working when I go deeper, such as /about/me.
If I look at Chrome's developer console I see some of the following errors (only for the deeper routes):
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".
So clearly it is now looking for the css inside the "about" folder--which of course isn't a folder at all.
I just want it to look in the same place for the assets regardless of the route.
Php Solutions
Solution 1 - Php
For Laravel 4 & 5:
<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">
URL::asset
will link to your project/public/
folder, so chuck your scripts in there.
Note: For this, you need to use the "Blade templating engine". Blade files use the
.blade.php
extension.
Solution 2 - Php
Laravel 4
The better and correct way to do this
Adding CSS
HTML::style will link to your project/public/ folder
{{ HTML::style('css/bootstrap.css') }}
Adding JS
HTML::script will link to your project/public/ folder
{{ HTML::script('js/script.js') }}
Solution 3 - Php
You are using relative paths for your assets, change to an absolute path and everything will work (add a slash before "css".
<link rel="stylesheet" href="/css/app.css" />
Solution 4 - Php
in Laravel 5,
there are 2 ways to load a js file in your view
first is using html helper, second is using asset helpers.
to use html helper you have to first install this package via commandline:
composer require illuminate/html
then you need to reqister it, so go to config/app.php, and add this line to the providers array
'Illuminate\Html\HtmlServiceProvider'
then you have to define aliases for your html package so go to aliases array in config/app.php and add this
'Html' => 'Illuminate\Html\HtmlFacade'
now your html helper is installed so in your blade view files you can write this:
{!! Html::script('js/test.js') !!}
this will look for your test.js file in your project_root/public/js/test.js.
//////////////////////////////////////////////////////////////
to use asset helpers instead of html helper, you have to write sth like this in your view files:
<script src="{{ URL::asset('test.js') }}"></script>
this will look for test.js file in project_root/resources/assets/test.js
Solution 5 - Php
If you're using Laravel 3 and your CSS/JS files inside public folder like this
public/css
public/js
then you can call them using in Blade templates like this
{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}
Solution 6 - Php
i suggest you put it on route filter before on {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');
});
and using blade template engine
{{ Asset::styles() }}
{{ Asset::scripts(); }}
or more on laravel managing assets docs
Solution 7 - Php
in laravel 4
you just have to paste {{ URL::asset('/') }}
this way:
<link rel="stylesheet" href="{{ URL::asset('/') }}css/app.css" />.
It is the same for:
<script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
<img src="{{ URL::asset('/') }}img/image.gif">
Solution 8 - Php
Laravel 5.4 with mix helper:
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>
Solution 9 - Php
In Laravel 5.7, put your CSS or JS file into Public directory.
For CSS:
<link rel="stylesheet" href="{{ asset('bootstrap.min.css') }}">
For JS:
<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
Solution 10 - Php
Best way in my opinion add BASE tag in your HTML
<base href="/" target="_top">
So it's not necessary to use things like
{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}
just type
<script src="js/jquery/jquery-1.11.1.min.js"></script>
in your view and it will works.
This mehod will deal with RESTful URLs and static resources as images, css, scripts.
Solution 11 - Php
Vinsa almost had it right you should add
<base href="{{URL::asset('/')}}" target="_top">
and scripts should go in their regular path
<script src="js/jquery/jquery-1.11.1.min.js"></script>
the reason for this is because Images and other things with relative path like image source or ajax requests won't work correctly without the base path attached.
Solution 12 - Php
If you do hard code it, you should probably use the full path (href="http://example.com/public/css/app.css"
). However, this means you'll have to manually adjust the URLs for development and production.
An Alternative to the above solutions would be to use <link rel="stylesheet" href="URL::to_asset('css/app.css')" />
in Laravel 3 or <link rel="stylesheet" href="URL::asset('css/app.css')" />
in Laravel 4. This will allow you to write your HTML the way you want it, but also let Laravel generate the proper path for you in any environment.
Solution 13 - Php
Better way to use like,
<link rel="stylesheet" href="{{asset('assets/libraries/css/app.css')}}">
Solution 14 - Php
Suppose you have not renamed your public folder. Your css and js files are in css and js subfolders in public folder. Now your header will be :
<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
Solution 15 - Php
Just Add Another Issue:
If you want to remove /public
from your project using .htaccess
,
then you can use this, [Add public
before /css
inside asset()
]
<link href="{{ asset('public/css/app.css') }}" rel="stylesheet">
[Sometimes, it is useful.]
Solution 16 - Php
For Laravel 4: {!! for a double curly brace { {
and for Laravel 5 & above version: you may replace {!! by {{ and !!} by }} in higher-end version
If you have placed JavaScript in a custom defined directory.
For instance, if your jQuery-2.2.0.min.js
is placed under the directory resources/views/admin/plugins/js/
then from the *.blade.php
you will be able to add at the end of the section as
<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>
Since Higher-End version supports Lower-End version also and but not vice-versa
Solution 17 - Php
The better and correct way to do this:
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
Solution 18 - Php
In Laravel 5.8
<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>
just made the trick for me.
Solution 19 - Php
put your script file in public directory then use(for example for userFunctions.js)
<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">