视图中未显示数据库中的图像

Question

我刚刚将我的 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 redirect()->back();
        */
        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

     <!--<img class="center-block" src="/avatars/{{ Auth::user()->avatar }}" style="width: 80px; border-radius: 20%; float:center;"> -->

         <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 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">

                <!--Ad-->

<!--<div style="color:black; text-align:center;" class="alert" role="alert">

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

    <span aria-hidden="true"><small style="color:silver"><small><small>Close Ad</small></small> </small></span>

  </button>

  <br/>

  <h6 class="alert-heading"><a href="https://www.cbs.co.ls/" target="_blank" rel="noopener"> <span class="badge badge-secondary"> Ad</span> <small>CBS</small> </a> <a href="https://www.cbs.co.ls/" target="_blank" rel="noopener" class="btn btn-secondary">Learn more</a></h6>

  <p style="color:grey;"><i class="fa fa-bullhorn" aria-hidden="true"></i> <small>We are a highly competitive IT player with customers across the globe. <label style="color:white;"> <b> Technology that transforms business.</b></label></small><img id="border-wrap" class="imogi" style="width: 40px; height:40px; border-radius: 20%" src="{{url('/img/cbs.png')}}"

        alt=""></p>

</div>

<br/>-->

<!--end Ad-->

       <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/>

              <!--LIVEWIRE online status-->

              @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->links() }}-->


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

        </div>

                <!--Ad-->

<div style="color:black; text-align:center;" class="alert" role="alert">

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

    <span aria-hidden="true"><small style="color:silver"><small><small>Close Ad</small></small> </small></span>

  </button>

  <br/>

  <h6 class="alert-heading"><a href="https://www.alliance.co.ls/" target="_blank" rel="noopener"> <span class="badge badge-secondary"> Ad</span> <i style="color:#3490dc" class="fa fa-globe" style="font-size:24px"></i> <small>Alliance</small> </a> </h6>

  <p style="color:grey;"><i class="fa fa-bullhorn" aria-hidden="true"></i> <small> Lesotho based Insurance providing Short-Term Commercial and Personal Insurance, Funeral. <label style="color:white;"></small><img id="border-wrap" class="imogi" style="width: 40px; height:40px; border-radius: 20%"  src="{{url('/img/alla.jpg')}}"

        alt=""></p>

</div>

<br/>

<!--end Ad-->

    </div>

</div>

@include('footer')

@endsection

I will appreciate any help thank you all in advance. 

Answer 1

部署 Laravel 项目后出现的图像显示问题可能是由于您的开发环境和部署服务器之间的文件结构或服务器配置不同所致。以下是解决问题的方法：

1。检查文件路径： 在视图文件中，您使用 asset('images/' . $inf->imogi) 构建图像路径。确保“images”文件夹存在于服务器上的公共目录中。这是存储上传的图像的位置。 仔细检查文件夹名称的大小写敏感性。文件系统可能区分大小写，因此“Images”可能与“images”不同。

2。存储链接： Laravel 使用符号链接将存储目录（默认存储上传内容）链接到公共目录。这允许通过 URL 访问上传的文件。 在您的服务器上运行以下命令以重新创建符号链接（如果丢失）：

       php artisan storage:link

3.公共路径： 确保您知道服务器上正确的公共路径。 Laravel 中的 asset helper 函数假设公共目录位于您网站的根目录。如果它位于子文件夹中（例如“public_html”），您可能需要相应地调整路径。

4。文件权限： 验证上传的图像和“images”文件夹对于 Web 服务器用户是否具有适当的读取权限。如果没有适当的权限，服务器可能无法访问这些文件。

调试步骤： 使用浏览器的开发人员工具检查网络请求。当您尝试加载图像时，应该会请求图像 URL。如果请求失败并出现 404（未找到）错误，则表明服务器无法找到该图像。