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

Viewed 92 times

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.

Answers

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

Sunday, August 14, 2022

dnaso-eada3510dc27

this appears to be getting a lot of search traffic so I figured I'd add an update to share how I'm handling this these days. Basically, it's a little more code but it ends up being stupid simple and very clean:

@if($foo)
  <p>Test</p>
@elseif($bar)
  <p>Test2</p>
@else
  <p>Test3</p>
@endif

The moral of the story is when you're working with blade, don't try to cram a lot of conditionals within elements. Rather, have the result of the conditional contain the element. It's clean, easy to read, and with only a few more characters spent.

Wednesday, August 24, 2022

taylorr

$dt = Carbon::now();
echo $dt->toW3cString();       // 2015-02-05T14:50:55+01:00

since carbon can print it it can also parse this format

Carbon::parse('2015-02-05T14:50:55+01:00');

in javascript with moment.js momentjs.com

moment().format(); // 2015-02-05T14:50:55+01:00

Thursday, December 22, 2022

you

Use PHP's native ucfirst function:

{{ ucfirst(trans('messages.welcome')) }}

Sunday, October 9, 2022

kmehta

IE supports attachEvent instead.

image.attachEvent("onload", function() {
    // ...
});

With jQuery, you can just write

$(image).load(function() {
    // ...
});

When it comes to events, if you have the possibility of using jQuery I would suggest using it because it will take care of browser compatibility. Your code will work on all major browser and you don't have to worry about that.

Note also that in order to the load event being fired in IE, you need to make sure the image won't be loaded from the cache, otherwise IE won't fire the load event.

To do this, you can append a dummy variable at the end of the url of your image, like this

image.setAttribute( 'src', image.getAttribute('src') + '?v=' + Math.random() );

Some known issues using the jQuery load method are

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser's cache

See the jQuery docs for more info.

Friday, September 16, 2022

snickfire

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

php

laravel

blade

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

Answers

php,laravel,blade