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

이제 분명히 "about"폴더에서 CSS를 찾고 있습니다. 물론 폴더는 전혀 아닙니다.

경로에 관계없이 자산에 대해 동일한 위치에 표시되기를 원합니다.

Laravel 4 및 5의 경우 :

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

URL::assetproject/public/폴더에 링크 되므로 스크립트를 거기에 넣으십시오.

라 라벨 4

이를 수행하는 더 좋고 올바른 방법

CSS 추가

HTML :: style은 프로젝트 / 공용 / 폴더에 링크됩니다.

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

JS 추가

HTML :: script는 프로젝트 / 공용 / 폴더에 연결됩니다.

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

자산에 상대 경로를 사용하고 있으며 절대 경로로 변경하면 모든 것이 작동합니다 ( "css"앞에 슬래시를 추가합니다.

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

Laravel 5 에서는
뷰에 js 파일을로드하는 두 가지 방법이 있습니다.
먼저 html 도우미를 사용하고 두 번째는 자산 도우미를 사용하는 것입니다.
html 도우미를 사용하려면 먼저 명령 줄을 통해이 패키지를 설치해야합니다.

composer require illuminate/html

그런 다음 다시 요청해야하므로 config / app.php로 이동하여이 행을 제공 업체 배열에 추가하십시오.

'Illuminate\Html\HtmlServiceProvider'

그런 다음 html 패키지의 별칭을 정의해야하므로 config / app.php의 별칭 배열로 이동하여 이것을 추가하십시오.

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

이제 html 도우미가 설치되었으므로 블레이드보기 파일에 다음과 같이 작성할 수 있습니다.

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

project_root / public / js / test.js에서 test.js 파일을 찾습니다.
///////////////////////////////////////////////// ////////////
html 도우미 대신 자산 도우미를 사용하려면보기 파일에 다음과 같이 sth를 작성해야합니다.

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

project_root / resources / assets / test.js에서 test.js 파일을 찾습니다.

Laravel 3과 CSS / JS 파일을 공용 폴더 안에 사용하는 경우

public/css
public/js

다음과 같이 Blade 템플릿에서 사용하여 호출 할 수 있습니다.

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

{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 관리 자산 문서

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

믹스 도우미가있는 Laravel 5.4 :

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

Laravel 5.7에서는 CSS 또는 JS 파일을 Public 디렉토리에 넣습니다.

CSS의 경우 :

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

JS의 경우 :

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

제 생각에는 HTML에 BASE 태그를 추가하는 가장 좋은 방법

<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, 스크립트로 처리합니다.

Vinsa는 당신이 추가해야 할 것이 거의 맞았습니다.

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

스크립트는 일반 경로로 이동해야합니다.

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

그 이유는 이미지 및 이미지 소스 또는 ajax 요청과 같은 상대 경로가있는 기타 항목이 기본 경로가 연결되지 않으면 올바르게 작동하지 않기 때문입니다.

하드 코딩을한다면 아마도 전체 경로 (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이 모든 환경에서 적절한 경로를 생성 할 수 있습니다.

더 나은 사용 방법,

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

공용 폴더의 이름을 변경하지 않았다고 가정합니다. 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>

다른 문제 추가 :

을 /public사용하여 프로젝트에서 제거하려면 .htaccess,

당신이 사용할 수 있습니다, [추가 public하기 전에 /css내부 asset()]

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

[때로는 유용합니다.]

Laravel 4 : {!! 이중 중괄호 {{
및 Laravel 5 이상 버전 : {!! 고급 버전에서 {{and !!} by}}

사용자 정의 디렉토리에 JavaScript를 배치 한 경우.
귀하의 경우 예를 들어, jQuery-2.2.0.min.jsIS 디렉토리 아래에 위치 resources/views/admin/plugins/js/로부터 다음 *.blade.php당신은 섹션의 끝으로에 추가 할 수 있습니다

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

Higher-End 버전은 Lower-End 버전도 지원하지만 그 반대는 지원하지 않습니다.

이를 수행하는 더 좋고 올바른 방법 :

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

Laravel 5.8에서

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

나를 위해 트릭을 만들었습니다.

스크립트 파일을 공용 디렉토리에 넣은 다음 사용하십시오 (예 : userFunctions.js)

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