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.

回答1:

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

回答2:

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

回答3:

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

回答4:

I supuse you're using Laravel 3, if yes put your CSS/JS files in public folder like

public/css
public/js

and call it using Blade templates

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

回答5:

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

回答6:

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

回答7:

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

回答8:

Laravel 5.4 with mix helper:

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

回答9:

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.

回答10:

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.

回答11:

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>

回答12:

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.

回答13:

Better way to use like,

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

回答14:

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>

回答15:

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

回答16:

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

回答17:

The better and correct way to do this:

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

回答18:

In Laravel 5.8

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

just made the trick for me.

回答19:

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

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

来源：https://stackoverflow.com/questions/15232600/laravel-stylesheets-and-javascript-dont-load-for-non-base-routes