Laravel项目public目录图片突然无法显示问题排查与解决

我正在为客户开发网站，目前在做管理后台添加活动的功能。所有图片都存放在Laravel项目的public目录下的images文件夹中（例如images/img1.jpg）。但创建新视图create.blade.php并引入navbar后，图片突然无法显示；而此前创建的jadwal.blade.php视图中图片显示正常。

相关代码 #

create.blade.php #

@extends('layouts.master')

@section('content')

  @include('components.navbar')

@endsection 

jadwal.blade.php #

@extends('layouts.master')
@section('content')
  @include('components.navbar')
  <div class='hero flex d-flex flex-column justify-content-center align-items-center'>
    <img class='section-bg' src="images/cross.jpg" alt="foto gereja">  
    <h1>ACARA</h1>
  </div>
  <div class='container-fluid flex d-flex flex-column p-3'>
    @foreach ($events as $event)
      <div class='event mt-3 p-3 container md-rounded d-flex flex flex-column'>
        <h3 class=' mb-4 fw-bold'>{{$event->event_title}}</h3>
        {{$event->event_date}}
        <p>{{$event->event_time}}</p>
      </div>
    @endforeach
  </div>
  @include('components.footer')
@endsection

主布局layouts/master.blade.php #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'> </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="css/app.css">
  <title>Gereja Isa Almasih </title>
</head>
<body>
  @yield('content')
</body>
</html>

项目目录结构 #

• 项目根目录
  • app/
  • public/
    • css/
      • app.css
    • images/
      • cross.jpg
      • 其他图片文件
  • resources/
    • views/
      • components/
        • navbar.blade.php
        • footer.blade.php
      • layouts/
        • master.blade.php
      • create.blade.php
      • jadwal.blade.php
  • 其他Laravel核心目录

显示对比 #

• jadwal.blade.php：navbar及页面内图片均正常显示
• create.blade.php：navbar中的图片无法加载，显示占位符

问题原因 #

核心问题是相对路径的解析逻辑差异：

1. jadwal.blade.php对应一级路由（如/jadwal），浏览器会把images/cross.jpg解析为http://你的域名/images/cross.jpg，正好匹配public/images下的文件，所以能正常加载。
2. create.blade.php对应多级后台路由（如/admin/events/create），浏览器会把相对路径images/xxx.jpg解析为http://你的域名/admin/events/images/xxx.jpg，这个路径下不存在图片文件，导致加载失败。

同时主布局中引用的css/app.css也存在相同的相对路径隐患，只是图片问题先暴露出来。

修复方法 #

Laravel提供了asset()辅助函数，能自动生成基于项目根URL的绝对路径，彻底解决相对路径的适配问题：

1. 修复图片路径 #

将所有图片的src属性替换为asset('images/图片文件名')：

• navbar中的图片示例：src="{{ asset('images/navbar-logo.jpg') }}"
• jadwal.blade.php中的图片修改：

<img class='section-bg' src="{{ asset('images/cross.jpg') }}" alt="foto gereja">

2. 修复CSS路径 #

主布局中的CSS引用也改为绝对路径：

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

3. 验证效果 #

修改后，无论当前页面处于几级路由路径下，浏览器都会请求正确的根路径资源（如http://你的域名/images/xxx.jpg），图片即可正常加载。

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