08_Laravel静态外部文件引入方式

Laravel静态外部文件引入方式

在写页面肯定会引入相关的外部文件(js、css、image),则会涉及到路径的问题。

建立index.css文件

为了方便测试,创建一个index.css文件,放在public/css
如果引入有效,则背景会变成pink色

* {
	background-color: pink;
}

创建视图 test.blade.php 引入index.css文件

  • 引入index.css文件

    <link rel="stylesheet" type="text/css" href="css/index.css">
    

    效果:背景没有变pink色,则引入无效。
    打开网页并没有变pink色
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E57FSaND-1584058896279)(images)]
    打开“开发者工作”把鼠标放在link的href链接上,然后右键“open in new tab”打开。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSmLkywb-1584058896285)(images)]
    我们发现,地址栏是:
    http://www.laravel227.com/view/css/index.css
    这么一串东西,也就是说当前的引入方式,是相当于当前位置来的。

  • 引入index.css文件

    <link rel="stylesheet" type="text/css" href="/css/index.css">
    

    效果:背景变pink色,则引入有效。
    为什么:因为“/”是根目录,从根目录开始

  • 引入index.css文件

    <link rel="stylesheet" type="text/css" href="{{asset('css')}}/index.css">
    

    效果:背景变pink色,则引入有效。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLwnFNF5-1584058896287)(images)]
    为什么:asset()方法,直接获取当前域名

发布了22 篇原创文章 · 获赞 16 · 访问量 1601

猜你喜欢

转载自blog.csdn.net/qq_43098197/article/details/104833255