Question

好的 - 我知道这是一个非常基本的问题，但我无法弄清楚。 这是关于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 - 当然这不是一个文件夹。

我只是想让它在同一个地方寻找资产而不管路线。

Answer 1

Laravel 4＆amp; 5：

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

URL::asset 会链接到您的 project/public/ 文件夹，因此请将您的脚本放入其中。

<小时/> ^{注意：为此，您需要使用“Blade templating engine”。刀片文件使用 .blade.php 扩展名。}

Answer 2

Laravel 4

更好更正确的方法

添加CSS

HTML :: style将链接到您的项目/公共/文件夹

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

添加JS

HTML ::脚本将链接到您的项目/公共/文件夹

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

Answer 3

您正在使用资产的相对路径，更改为绝对路径，一切都会正常工作（在“css”之前添加斜杠。

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

Answer 4

我认为你正在使用Laravel 3，如果是的话将你的CSS / JS文件放在公共文件夹中，如

public/css
public/js

并使用Blade模板调用它

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

Answer 5

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助手，你必须在你的视图文件中写这样的东西：

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

这将在project_root / resources / assets / test.js中查找test.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(); }}

<{3}}

上的

或更多内容

Answer 7

Laravel 5.4 with mix helper：

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

Answer 8

维萨几乎是对的你应该添加

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

脚本应该按照常规路径进行

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

原因是因为如果没有附加基本路径，图像和具有相对路径的其他东西（如图像源或ajax请求）将无法正常工作。

Answer 9

在Laravel 5.7中，将您的CSS或JS文件放入“公共”目录。

对于CSS：

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

对于JS：

<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

在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 12

更好的使用方式，

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

Answer 13

假设您尚未重命名公用文件夹。您的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>

Answer 14

只需添加其他问题：

如果您想使用/public，

从项目中删除.htaccess

然后您可以使用此功能，[在public内/css之前添加asset()

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

[有时，这很有用。]

Answer 15

如果您对其进行硬编码，则应该使用完整路径（href="http://example.com/public/css/app.css"）。但是，这意味着您必须手动调整开发和生产的URL。

上述解决方案的替代方案是在Laravel 3中使用<link rel="stylesheet" href="URL::to_asset('css/app.css')" />或在Laravel 4中使用<link rel="stylesheet" href="URL::asset('css/app.css')" />。这将允许您按照自己的方式编写HTML，但也让Laravel生成在任何环境中适合您的路径。

Answer 16

对于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>

因为高端版本也支持低端版本，但反之亦然

Answer 17

执行此操作的更好和正确的方法：

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

Answer 18

在Laravel 5.8中

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

为我制造了诡计。

Answer 19

将脚本文件放在公共目录中，然后使用（例如用于userFunctions.js）

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

Laravel样式表和javascript不会加载非基本路由

19 个答案: