Why I can't obtain the complete path of a CSS resource in a blade template?

问题

I am very new in Laravel. I am working on a Laravel 5.4 application and I have the following problem using blade to retrieve the comple URL of a CSS resource.

This is my app.blade.php file representing the template of all my views:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link href="/css/app.css" rel="stylesheet">-->
    <!--<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >-->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="/js/app.js"></script>
</head>
<body>

    <div class="container" style="width: 60%; margin-bottom: 50px;">
        @yield('content')
    </div>

    @yield('footer')

</body>
</html>

As you can see, folloing this SO post: Laravel 5 not finding css files

I am defining this CSS resource in this way:

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

to retrieve the http://localhost/HotelRegistration/public/css/app.css resource from the correct place.

The problem is that doing in this way opening an URL like http://localhost/HotelRegistration/public/registration

I still obtain the wrong CSS link in the generated page, this one:

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

Doing in this way I expected to obtain the correct one http://localhost/HotelRegistration/public/css/app.css

I also tried to import it using this alternative link:

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

but I am obtaining the same results.

What is wrong? What am I missing? How can I fix this issue and obtain the correct url of my CSS including the entire path?

回答1:

First, it is a good idea to use artisan serve:

php artisan serve

This will reduces a lot of headaches. If you are on a Mac, try valet. It is really nice and light.

Second you need to import css in following manner:

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

I hope this solves your problem.

回答2:

Use a virtual host in apache config files your root is the public dir not your localhost root (replace YOUR_LOCALHOST_ROOT_PATH of course) :

<VirtualHost *:80>
ServerAdmin test@test.com
DocumentRoot YOUR_LOCALHOST_ROOT_PATH/HotelRegistration/public
ServerName hotel.dev
<Directory "YOUR_LOCALHOST_ROOT_PATH/HotelRegistration/public">
      AllowOverride All
      Require all granted
</Directory>

Of course hotel.dev does not exist on the internet, no problem, use your system host file ! In your host file (on windows : C:/Windows/System32/drivers/etc/host , linux /etc/host ) add this line :

127.0.0.1 hotel.dev

you can add more line too :

127.0.0.1 hotel.dev another.dev youtestsite.dev

Restart your browser and apache it should work immediatly

And use http://hotel.dev

You should not have any path problem after that !

回答3:

If you work on your localhost, you should run command line from your directory root project (e.g.: HotelRegistration/) :

php artisan serve

By default you will can access your project with url: http://127.0.0.1:8000/ and you css link will look like http://127.0.0.1:8000/css/app.css

If you want to host on your remote server, you can use .htaccess rewrite mode redirect to index.php of public directory.

来源：https://stackoverflow.com/questions/43372911/why-i-cant-obtain-the-complete-path-of-a-css-resource-in-a-blade-template

标签

php

laravel

laravel-5

blade

laravel-5.4