Laravel 5.5：如何在CSS背景图用asset()及解决路由资源加载问题

一、在CSS背景图中使用asset()方法 #

你只需要把背景图的相对路径替换成asset()生成的绝对路径，直接在HTML的style属性里嵌入Blade模板语法就行：

<div class="attached-img-container" style="background-image:url({{ asset('dist/img/gallery/equal-size/mock1.jpg') }})"></div>

asset()方法会自动生成指向public文件夹下对应资源的完整绝对路径，不管当前路由是什么层级，都能精准定位到资源文件。

二、路由下资源加载异常的原因及解决 #

问题根源 #

你遇到的inbox路由下资源正常，但message和compose路由下资源加载失败的问题，核心是相对路径的适配问题：

• 访问/inbox时，页面的相对基准路径是网站根目录，相对路径dist/img/...会被浏览器解析成/dist/img/...，刚好匹配public下的资源位置；
• 但访问/inbox/message或/inbox/compose时，相对基准路径变成了/inbox/message/，浏览器会把dist/img/...解析成/inbox/message/dist/img/...，这显然不是资源实际存放的位置，所以加载失败。

彻底解决方法 #

所有引用网站资源的地方，统一改用asset()（如果用了Laravel Mix，也可以用mix()）生成绝对路径：

• 样式表引用：{{ asset('dist/css/style.css') }}（你已经在这么用了，这点做得很好）
• 脚本引用：<script src="{{ asset('dist/js/app.js') }}"></script>
• 内联背景图：就是上面提到的写法

这样不管路由层级多深，资源路径都是绝对的，不会受当前URL影响，所有路由下的资源都能正常加载了。

内容的提问来源于stack exchange，提问作者Andreas Hunter