Laravel Blade中背景图片无法在浏览器显示的问题求助

你的代码里背景图片的CSS语法存在错误，导致浏览器无法正确解析路径。

错误原因 #

原代码中background-image: url{{asset('img blades/home-bg.jpg')}}的写法不符合CSS规范：CSS的url()函数必须用括号包裹路径，而你直接把Blade的输出拼在了url后面，生成的最终CSS会变成urlhttp://your-domain/img%20blades/home-bg.jpg，这种格式浏览器无法识别。

修正后的代码 #

<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url({{asset('img blades/home-bg.jpg')}})">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>Clean Blog</h1>
                    <hr class="small">
                    <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                </div>
            </div>
        </div>
    </div>
</header>

补充说明 #

虽然你用img标签测试路径正常，是因为img的src属性直接接受路径字符串，不需要遵循CSS的url()语法规则，但背景图片属于CSS样式，必须严格按照CSS语法来写，把asset()生成的路径放在url()的括号内即可正常显示。

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