[php] Laravel stylesheets and javascript don't load for non-base routes

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.

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

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.

The better and correct way to do this:

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

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>

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

Laravel 5.4 with mix helper:

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

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.

In Laravel 5.8

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

just made the trick for me.

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') }}

Better way to use like,

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

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'); }}

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.]

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">

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.

put your script file in public directory then use(for example for userFunctions.js)

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

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>

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

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" />