it-roy-ru.com

Таблицы стилей Laravel и JavaScript не загружаются для неосновных маршрутов

Хорошо - я знаю, что это действительно элементарная проблема, но я не могу понять это. Это вопрос относительно Laravel.

По сути, у меня есть встроенные таблицы стилей в виде макета по умолчанию. В настоящее время я просто использую обычные CSS, чтобы связать их, например:

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

Это прекрасно работает, когда я нахожусь на одном уровне маршрута, таком как/about , но перестает работать, когда я углубляюсь, например/about/me .

Если я смотрю на консоль разработчика Chrome, я вижу некоторые из следующих ошибок (только для более глубоких маршрутов):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

Ясно, что теперь он ищет css внутри папки about, которая, конечно, вообще не является папкой.

Я просто хочу, чтобы он выглядел в одном и том же месте для активов независимо от маршрута.

85
Pete

Для Laravel 4 и 5:

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

URL::asset свяжется с вашей папкой project/public/, поэтому добавьте туда свои скрипты .


Примечание: Для этого вам нужно использовать " Blade Templating Engine ". Файлы Blade используют расширение .blade.php.

153
gan

Laravel 4

Лучший и правильный способ сделать это

Добавление CSS

HTML :: style будет ссылаться на ваш проект/public/folder

{{ HTML::style('css/bootstrap.css') }}

Добавление JS

HTML :: скрипт будет ссылаться на ваш проект/публичную/папку

{{ HTML::script('js/script.js') }}
52
mXX

Вы используете относительные пути для своих активов, измените абсолютный путь, и все будет работать (добавьте косую черту перед "css".

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

в Ларавеле 5 ,
Есть 2 способа загрузить файл JS на ваш взгляд
first использует помощник html, второй использует помощники актива.
Чтобы использовать html helper, вы должны сначала установить этот пакет через командную строку:

composer require illuminate/html

затем вам нужно перерегистрировать его, поэтому перейдите в config/app.php и добавьте эту строку в массив провайдеров

'Illuminate\Html\HtmlServiceProvider'

затем вы должны определить псевдонимы для вашего html-пакета, поэтому перейдите в массив aliases в config/app.php и добавьте это

'Html'     => 'Illuminate\Html\HtmlFacade'

теперь ваш html помощник установлен, поэтому в ваших файлах просмотра блейдов вы можете написать это:

{!! Html::script('js/test.js') !!}

это будет искать ваш файл test.js в вашем project_root/public/js/test.js.
/////////////////////////////////////////////// ///////////////
Чтобы использовать помощники ресурсов вместо помощника html, вы должны написать вот что в этих файлах просмотра:

<script src="{{ URL::asset('test.js') }}"></script>

это будет искать файл test.js в project_root/resources/assets/test.js

9
Salar

Я полагаю, что вы используете Laravel 3, если да, поместите ваши файлы CSS/JS в общую папку, как

public/css
public/js

и вызвать его с помощью шаблонов Blade

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

я предлагаю вам включить его в фильтр маршрутов до {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');

});

и с использованием шаблона лезвия

{{ Asset::styles() }}
{{ Asset::scripts(); }}

или более на документы по управлению активами laravel

6
Andry Yosua

Laravel 5.4 со смесью помощников:

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

В Laravel 5.7 поместите ваш файл CSS или JS в публичный каталог.

Для CSS:

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

Для JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
2
Innocent TRA BI Le disciple

в laravel 4 вам просто нужно вставить {{ URL::asset('/') }} следующим образом: 

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

Это то же самое для:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">
2
fravemel

Винса почти имела право Вы должны добавить 

<base href="{{URL::asset('/')}}" target="_top">

и сценарии должны идти в их обычном пути 

<script src="js/jquery/jquery-1.11.1.min.js"></script>

причина этого в том, что изображения и другие объекты с относительным путем, такие как источник изображения или запросы AJAX, не будут работать правильно без присоединенного базового пути.

2
Cptmaxon

Лучший способ, на мой взгляд, добавить тег BASE в ваш HTML

<base href="/" target="_top">

Поэтому нет необходимости использовать такие вещи, как 

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

просто введите

<script src="js/jquery/jquery-1.11.1.min.js"></script>

по вашему мнению, и это будет работать.

Этот метод будет работать с RESTful URL и статическими ресурсами, такими как изображения, CSS, скрипты.

2
vinsa

Лучший способ использовать как,

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

Если вы делаете жесткий код, вам, вероятно, следует использовать полный путь (href="http://example.com/public/css/app.css"). Однако это означает, что вам придется вручную корректировать URL-адреса для разработки и производства.

Альтернативой вышеупомянутым решениям будет использование <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> в Laravel 3 или <link rel="stylesheet" href="URL::asset('css/app.css')" /> в Laravel 4. Это позволит вам писать свой HTML-код так, как вы этого хотите, но также позволит Laravel генерировать правильный путь для вас в любой среде. 

1
mckendricks

Предположим, вы не переименовали свою общую папку. Ваши css и js файлы находятся в подпапках css и js в общей папке. Теперь ваш заголовок будет: 

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
1
Hafsul Maru

Просто добавьте еще одну проблему:

Если вы хотите удалить /public из вашего проекта, используя .htaccess

затем вы можете использовать это, [Добавить public перед /css внутри asset()]

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

[Иногда это полезно.]

1
Maniruzzaman Akash

Для Laravel 4: {!! для двойной фигурной скобки {{ 
и для версии Laravel 5 и выше: вы можете заменить {!! на {{и !!} на}} в старшей версии

Если вы поместили JavaScript в пользовательский каталог.
Например, если вашjQuery-2.2.0.min.jsнаходится в каталогеresources/views/admin/plugins/js/, то из*.blade.phpвы сможете добавить в конце раздела как

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

Так как версия Higher-End также поддерживает версию Low-End, но не наоборот

0
Nishanth ॐ

Лучший и правильный способ сделать это:

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