Laravel项目部署服务器后视图图片无法显示问题求助

问题描述 #

Laravel项目上传至服务器后，视图仅能显示图片对应的文字数据，图片无法加载；本地环境下图片显示完全正常。

存储图片的控制器代码 #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Lost;
use App\Models\User;

class LostController extends Controller
{
    public function display(Request $request)
    {
        $request->validate([
            'name'=>'required',
            'location'=>'required',
            'message'=>'required',
            'contact'=>'required|numeric|min:6',
            'imogi'=>'required|mimes:jpg,png,jpeg|max:5048'
           
        ]);

        $newImageName = time() . '-' . $request->name . '.' . $request->imogi->extension();
        $request->imogi->move(public_path('images'), $newImageName);


        $Lost = new Lost;
    
        $Lost->name = $request->input('name');
        $Lost->location = $request->input('location');
        $Lost->message = $request->input('message');
        $Lost->contact = $request->input('contact');
        $Lost->imogi = $newImageName;
        $Lost->save();

        return back()->with('success', 'Send successfully.');

    }
}

上传图片的视图代码 #

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h5 style="text-align: center;"><label style="color:#3490dc;">Post</label> <label style="color:white;"> Lost or Found</label></h5>

            <form action="founds" method="POST" enctype="multipart/form-data">
                @csrf

                @if (session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <div class="form-group">
                    <label for="exampleFormControlInput1"><i style="color:#3490dc" class="fa fa-user" style="font-size:24px"></i> <label style="color:white;">Name</label></label>
                    <input type="text" class="form-control" id="exampleFormControlInput1" name="name" value="{{ auth()->user()->name }}" readonly>
                </div>

                <div class="form-group">
                    <label for="exampleFormControlInput1"><i style="color:#3490dc" class="fa fa-map-marker" style="font-size:24px"></i> <label style="color:white;">Location</label></label>
                    <input type="text" class="form-control @error('location') is-invalid @enderror" id="exampleFormControlInput1" name="location">
                    <span style="color: red;"><small>@error('location'){{$message}}@enderror</small></span>
                    <small style="color:white;">Give the location where the item was found/lost</small>
                </div>

                <div class="form-group">
                    <label for="exampleFormControlInput1"><i style="color:#3490dc" class="fa fa-pencil" style="font-size:24px"></i> <label style="color:white;">Item details</label></label>
                    <textarea type="text" class="form-control @error('message') is-invalid @enderror"  id="exampleFormControlTextarea1" rows="2" name="message" placeholder=""></textarea>
                    <span style="color: red;"><small>@error('message'){{$message}}@enderror</small></span>
                    <small style="color:white;">Provide the details of the found/lost item</small>
                </div>

                <div class="form-group">
                    <label for="exampleFormControlInput1"><i style="color:#3490dc" class="fa fa-phone" style="font-size:24px"></i> <label style="color:white;">Contacts</label></label>
                    <input type="text" class="form-control @error('contact') is-invalid @enderror"  id="exampleFormControlInput1" name="contact">
                    <span style="color: red;"><small>@error('contact'){{$message}}@enderror</small></span>
                    <small style="color:white;">Provide your contacts here</small>
                </div>

                <label for="exampleFormControlInput1"><i style="color:#3490dc" class="fa fa-picture-o" style="font-size:24px"></i> <label style="color:white;"></label></label>
                
                <!-- 原代码存在嵌套form，此处为问题点 -->
                <form action="{{ route('file.upload.post') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <input type="file" class="form-control @error('imogi') is-invalid @enderror"  name="imogi">
                        </div>
                    </div>
                    <small style="color:white;">Select the image of the found/lost item</small>
                    <br/>
                    <br/>
                    <button type="submit" style="text-align: center; background-color:#3490dc; color:white;" class="btn">Post</button>
                </form>
                <br/>
            </form>
        </div>
    </div>
</div>

@include('footer')

@endsection

展示图片的视图代码 #

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h4 style="color:silver;">Lost and Found</h4>

            <div style="background-color:#162238; color:white;" class="card">
                <div class="card-body">
                    <form class="form-inline" type="get" action="{{url('/search_lost')}}" role="search" method="get">
                        <input id="search-input" type="search" name="query" class="form-control" placeholder="Search">  
                        <div class="input-group-append">
                            <button type="submit" style="text-align: center; background-color:#131c2d; color:#3490dc;" class="btn"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                    </form>
                </div>
            </div>
            <br/>

            @foreach($info as $inf)
            <div style="background-color:#162238; color:white;" class="card mb-3" style="max-width: 540px;">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{asset('images/' . $inf->imogi)}}" alt="" />
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <div style="text-align: right;">
                                <small><i class="fa fa-calendar" style="color:#3490dc" aria-hidden="true"></i> {{ $inf->created_at->format('l, d F, Y') }}</small>
                            </div>
                            <br/>

                            @if($inf->isOnline())
                                <small><div class="circle"></div></small>
                            @else
                                <small><div  class="ocircle"></div></small> 
                            @endif 
                            <br/>

                            <h5 class="card-title"><i class="fa fa-user-circle-o" style="color:#3490dc" aria-hidden="true"></i> <a style="color:white;" href="">{{$inf->name}} </a></h5>
                            <i class="fa fa-clock-o" style="color:#3490dc;"></i> <small style="color:#3490dc;"> posted {{ \Carbon\Carbon::parse($inf->created_at)->diffForHumans() }}</small><br/>
                            <i class="fa fa-map-marker" style="color:#3490dc" aria-hidden="true"></i> <small>{{$inf->location}}</small> <br/> <small><i class="fa fa-phone" style="color:#3490dc" aria-hidden="true"></i></small> <small>{{$inf->contact}}</small>
                            
                            <hr color=3490dc>
                            <p class="card-text">
                                <p><label style="color:#3490dc;"></label> {{$inf->message}}</p>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            @endforeach

            {!! $info->withQueryString()->links('pagination::bootstrap-5') !!}
        </div>
    </div>
</div>

@include('footer')

@endsection

排查步骤 #

1. 修复表单嵌套问题 #

上传视图中存在嵌套form标签，这会导致表单提交逻辑异常，图片可能根本没上传到服务器。

• 解决方案：删除内层的<form action="{{ route('file.upload.post') }}" ...>标签，将文件上传input直接放到外层form中，确保整个提交流程只有一个form，且enctype="multipart/form-data"属性正确设置。

2. 检查服务器目录权限 #

• 确认服务器上public/images目录存在，并且赋予web服务器用户（如www-data、apache）读写权限：

  chmod -R 755 public/images
  chown -R www-data:www-data public/images
  

• 登录服务器，查看public/images目录下是否存在上传后的图片，文件名需与数据库中Lost表的imogi字段值完全一致。

3. 验证图片URL正确性 #

• 检查.env文件中的APP_URL配置是否为服务器的正确域名/IP：

  APP_URL=https://your-server-domain.com
  

• 在浏览器中直接访问图片的完整URL（例如https://your-server-domain.com/images/xxx.jpg），若返回404，说明路径错误或文件不存在；若返回权限错误，需重新配置目录权限。

4. 检查PHP上传限制 #

• 查看服务器php.ini中的upload_max_filesize和post_max_size参数，确保值大于代码中限制的5MB：

  upload_max_filesize = 10M
  post_max_size = 10M
  

• 修改后重启web服务器（如systemctl restart apache2或systemctl restart nginx）。

5. 补充检查：Laravel符号链接（若使用storage目录） #

如果后续调整为将图片存储到storage/app/public目录，需执行以下命令创建符号链接：

php artisan storage:link

当前代码直接存储到public/images，此步骤可作为备选检查项。

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