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

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

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

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

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

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

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

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

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

Ответ 1

Для Laravel 4 и 5:

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

URL::asset будет ссылаться на ваш project/public/ folder, так что добавьте туда свои скрипты.

^{Примечание: для этого вам нужно использовать " движок шаблонов ".}^{Файлы Blade используют расширение .blade.php.}

Ответ 2

Laravel 4

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

Добавление CSS

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

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

Добавление JS

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

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

Ответ 3

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

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

Ответ 4

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

public/css
public/js

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

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

Ответ 5

в Laravel 5,
есть два способа загрузить файл js в вашем представлении
сначала используется html-помощник, второй - с помощью помощников активов.
для использования html-помощника вы должны сначала установить этот пакет через командную строку:

composer require illuminate/html

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

'Illuminate\Html\HtmlServiceProvider'

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

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

теперь ваш html-помощник установлен так, что в файлах просмотра вашего лезвия вы можете написать это:

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

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

Laravel 5.4 с помощником смешивания:

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

Ответ 9

Лучший способ, по-моему, добавить тег 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>

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

Для CSS:

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

Для JS:

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

Ответ 12

Если вы делаете жесткий код, вам, вероятно, следует использовать полный путь (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 создать правильный путь для вы в любой среде.

Ответ 13

Лучший способ использовать, например,

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

Ответ 14

Предположим, вы не переименовали свою общую папку. Файлы 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>

Ответ 15

Просто добавьте еще один вопрос:

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

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

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

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

Ответ 16

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

Если вы поместили 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, но не наоборот

Ответ 17

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

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

Ответ 18

В Ларавеле 5,8

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

только что помогло.

Ответ 19

поместите файл скрипта в публичный каталог, затем используйте (например, для userFunctions.js)

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