लारवेल स्टाइलशीट और जावास्क्रिप्ट गैर-आधार मार्गों के लिए लोड नहीं करते हैं

Question

ठीक है - मुझे पता है कि यह वास्तव में एक प्राथमिक मुद्दा है, लेकिन मैं इसका पता नहीं लगा सकता। यह लारवेल के संबंध में एक प्रश्न है।

मूल रूप से, मेरे पास मेरे डिफ़ॉल्ट लेआउट दृश्य में मेरे स्टाइलशीट एम्बेडेड हैं। मैं वर्तमान में उन्हें जोड़ने के लिए नियमित सीएसएस का उपयोग कर रहा हूं, जैसे:

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

जब मैं किसी एकल स्तर के मार्ग जैसे / के बारे में होता हूं, तो यह बहुत अच्छा काम करता है , लेकिन जब मैं / मेरे बारे में / जैसे गहराई में जाता हूं तो काम करना बंद कर देता है ।

यदि मैं Chrome के डेवलपर कंसोल को देखता हूं तो मुझे कुछ निम्न त्रुटियां दिखाई देती हैं (केवल गहरे मार्गों के लिए):

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

तो स्पष्ट रूप से यह अब "के बारे में" फ़ोल्डर के अंदर सीएसएस की तलाश में है - जो बिल्कुल एक फ़ोल्डर नहीं है।

मैं सिर्फ यह चाहता हूं कि मार्ग की परवाह किए बिना परिसंपत्तियों के लिए एक ही स्थान पर देखें।

Answer 1

लारावेल 4 और 5 के लिए:

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

URL::assetआपके project/public/फ़ोल्डर से लिंक होगा , इसलिए वहां अपनी स्क्रिप्ट्स को चक दें।

---

^{नोट: इसके लिए, आपको " ब्लेड टेंपलेटिंग इंजन " का उपयोग करने की आवश्यकता है । ब्लेड फाइलें .blade.phpएक्सटेंशन का उपयोग करती हैं ।}

Comments

बस यह पुष्टि करता है कि यह लारवेल 5 और 5.1 में भी काम करता है । धन्यवाद।

— फिलिप फ़िलिपोविक

मैंने अपना खुद का पैकेज बनाया है। क्या मुझे इसके अंदर css हो सकता है? यदि हां, तो मैं अपने पैकेज से सीएसएस कैसे शामिल कर सकता हूं?

— १६:१६

आप asset()तत्काल सहायक विधि का भी उपयोग कर सकते हैं URL::asset()। यह वही काम करता है।

— मारेक स्किबा

Laravel 5.4 में भी काम करता है ।

— user3426112

क्या होगा यदि आप उत्पादन पर लघु संस्करण चाहते हैं लेकिन विकास में नहीं?

— जियोसेडिक

Answer 2

लारवेल ४

ऐसा करने का बेहतर और सही तरीका है

सीएसएस जोड़ना

HTML :: शैली आपके प्रोजेक्ट / सार्वजनिक / फ़ोल्डर से लिंक होगी

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

जेएस जोड़ना

HTML :: स्क्रिप्ट आपके प्रोजेक्ट / सार्वजनिक / फ़ोल्डर से लिंक होगी

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

Answer 3

आप अपनी संपत्ति के लिए सापेक्ष पथ का उपयोग कर रहे हैं, एक निरपेक्ष पथ में परिवर्तन और सब कुछ काम करेगा ("सीएसएस" से पहले एक स्लैश जोड़ें)।

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

Comments

यदि आपका ऐप साइट के किसी उपनिर्देशिका में स्थित है तो यह काम नहीं करेगा। फिर आप उस मुद्दे पर चलते हैं जहां आप अपनी परिसंपत्तियों के लिए बहुत पीछे दिख रहे हैं। मेरी सलाह है कि प्रदान किए गए समाधान @ क्रिस का उपयोग करें। यह सभी अनुमानों को समाप्त करता है, और आपको अपने ऐप को कहीं भी स्थानांतरित करने की अनुमति देता है, और फिर भी यह सुनिश्चित करता है कि यह संपत्ति को सही ढंग से लोड करेगा।

— टिम एफ

Answer 4

Laravel 5 में ,
आपके विचार में js फ़ाइल लोड करने के 2 तरीके हैं।
पहला HTML हेल्पर का उपयोग कर रहा है, दूसरा एसेट हेल्पर्स का उपयोग कर रहा है।
html सहायक का उपयोग करने के लिए आपको पहले इस पैकेज को कमांडलाइन के माध्यम से स्थापित करना होगा:

composer require illuminate/html

फिर आपको इसे फिर से चालू करने की आवश्यकता है, इसलिए config / app.php पर जाएं, और इस लाइन को प्रदाताओं के सरणी में जोड़ें

'Illuminate\Html\HtmlServiceProvider'

उसके बाद आपको अपने html पैकेज के लिए उपनामों को परिभाषित करना होगा इसलिए config / app.php में उपनामों पर जाएं और इसे जोड़ें

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

अब आपका एचटीएमएल हेल्पर आपके ब्लेड व्यू फाइलों में स्थापित है जिसे आप यह लिख सकते हैं:

{!! 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 / आस्तियों / test.js में test.js फ़ाइल के लिए दिखेगा

Comments

प्रकाशित / html को छोड़ दिया गया है। इसके बजाय उपयोगकर्ता laravelcollective / html।

— जियोसेडिक

आप भी उपयोग कर सकते हैं <script src="{{ url(asset('test.js')) }}"></script>(या <script src="{{ url(mix('test.js')) }}"></script>यदि आप लारवेल मिक्स का उपयोग कर रहे हैं)।

— स्निप

Answer 5

यदि आप इस तरह सार्वजनिक फ़ोल्डर के अंदर लारवेल 3 और अपनी सीएसएस / जेएस फाइलों का उपयोग कर रहे हैं

public/css
public/js

तो आप उन्हें इस तरह से ब्लेड टेम्पलेट में उपयोग करके कॉल कर सकते हैं

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

Answer 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(); }}

या अधिक लार्वा का प्रबंधन परिसंपत्तियों पर डॉक्स

Comments

हाँ, यह नया लार्वा सब कुछ जटिल बना देता है, संपत्ति, यहां तक ​​कि प्रोफाइलर भी अब प्रलेखन पर नहीं हैं ..

— एंड्री योसुआ

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

Answer 8

मिक्स हेल्पर के साथ लारवेल 5.4:

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

Answer 9

Laravel 5.7 में, अपनी CSS या JS फाइल को पब्लिक डायरेक्टरी में रखें।

सीएसएस के लिए:

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

जेएस के लिए:

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

Answer 10

मेरी राय में सबसे अच्छा तरीका है अपने 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, लिपियों के रूप में काम करेगा।

Answer 11

Vinsa लगभग यह सही था आप जोड़ना चाहिए

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

और स्क्रिप्ट को अपने नियमित पथ पर जाना चाहिए

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

इसका कारण यह है क्योंकि छवियाँ और अन्य चीजें जैसे रिश्तेदार पथ के साथ जैसे छवि स्रोत या AJAX अनुरोध बिना आधार पथ संलग्न किए सही ढंग से काम नहीं करेंगे।

Answer 12

यदि आप इसे हार्ड कोड करते हैं, तो आपको संभवतः पूर्ण पथ का उपयोग करना चाहिए (href="http://example.com/public/css/app.css" ) का । हालांकि, इसका मतलब है कि आपको विकास और उत्पादन के लिए यूआरएल को मैन्युअल रूप से समायोजित करना होगा।

उपरोक्त समाधानों का एक विकल्प <link rel="stylesheet" href="URL::to_asset('css/app.css')" />लारावेल 3 या <link rel="stylesheet" href="URL::asset('css/app.css')" />लारवेल 4 में उपयोग किया जाएगा। यह आपको अपना एचटीएमएल लिखने के लिए अनुमति देगा जिस तरह से आप चाहते हैं, लेकिन लारवेल को किसी भी वातावरण में आपके लिए उचित मार्ग उत्पन्न करने दें।

Answer 13

उपयोग करने का बेहतर तरीका,

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

Answer 14

मान लीजिए आपने अपने सार्वजनिक फ़ोल्डर का नाम नहीं बदला है। आपकी सीएसएस और जेएस फाइलें सार्वजनिक फ़ोल्डर में सीएसएस और जेएस सबफोल्डर्स में हैं। अब आपका हैडर होगा:

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

Answer 15

बस एक और मुद्दा जोड़ें:

यदि आप /publicअपने प्रोजेक्ट का उपयोग करके हटाना चाहते हैं .htaccess,

तब आप इसका उपयोग कर सकते हैं, [ अंदर publicपहले जोड़ें ]/cssasset()

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

[कभी-कभी, यह उपयोगी है।]

Answer 16

लारवेल 4 के लिए: {!! एक डबल घुंघराले ब्रेस के लिए {{
और लारवेल 5 और इसके बाद के संस्करण के लिए: आप {!! उच्च अंत संस्करण में {{और !!} by}} द्वारा

यदि आपने जावास्क्रिप्ट को कस्टम परिभाषित निर्देशिका में रखा है।
उदाहरण के लिए, यदि आपकी 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>

चूंकि हायर-एंड संस्करण लोअर-एंड संस्करण का भी समर्थन करता है, लेकिन इसके विपरीत नहीं

Answer 17

ऐसा करने का बेहतर और सही तरीका:

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

Answer 18

लारवेल में 5.8

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

बस मेरे लिए चाल बना दिया।

Answer 19

अपनी स्क्रिप्ट फ़ाइल को सार्वजनिक निर्देशिका में रखें, फिर उपयोग करें (उदाहरण के लिए userFunctions.js)

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