如何从表单中保存图片，然后使用 Laravel 将其显示到视图中？

Question

我现在正在尝试的是，通过一个表单，我将保存一张图片（不在数据库中），但我不知道在哪个文件夹中（在存储中公开？到资产/img 文件夹中？ )。

我的第二个问题是如何显示这张图片。

现在，我可以在storage/app/public 文件夹中保存一张图片，这是我的功能：

protected function saveFiles($idRecette, $file)
{
    $recette = Recette::where('id_recette',$idRecette)->firstOrFail();
    $path = 'documents/recettes/' . $idRecette . '/' . $recette->titre;
    $fileName = $idRecette.'-'.$recette->titre.'.'.$file->getClientOriginalExtension();
    $file->storeAs($path, $fileName);
}

现在，显示我的主页的功能：

public function accueil_recette(Request $request)
{
  $recette_ALL = Recette::orderBy('created_at', 'desc')->get();
  $data = array();
  foreach($recette_ALL as $recette){
     $path = 'documents/recettes/';
     $files = Storage::files($path.$recette->id_recette . '/' . $recette->titre);
     $absolute_path = storage_path('app/'.$files[0]);
     $data[$recette->id_recette] = $absolute_path;   
  }
  return view('admin/recette/admin_liste_recette', [
    'data' => $data
  ]);
}

在我看来

<img src="{{ $data[$recette->id_recette] }}" alt="" width="140" height="100">

然后，当我访问该站点并执行 inspect element 时，我有这个：

<img src="C:\xampp\htdocs\myproject\storage\app/documents/recettes/45/Test name/45-Test name.jpg">

如果我尝试将此路径放入文件夹，它将打开我的图片。

但是，我的页面上仍然没有显示图片...

Answer 1

storage_path 返回存储的绝对路径，您需要的是 \Storage::url 返回 URL

但首先，通过运行以下 artisan 命令，确保您在 public 目录中拥有指向 storage/app/public 的符号链接：

php artisan storage:link

然后：

public function accueil_recette(Request $request)
{
  $recette_ALL = Recette::orderBy('created_at', 'desc')->get();
  $data = array();
  foreach($recette_ALL as $recette){
     $path = 'documents/recettes/';
     $files = Storage::files($path.$recette->id_recette . '/' . $recette->titre);
     
     //I changed storage_path to Storage::URL
     // Thus will give you `storage/documents/recettes/45/Test name/45-Test name.jpg`
     $data[$recette->id_recette] = \Storage::url($files[0]);   
  }
  return view('admin/recette/admin_liste_recette', [
    'data' => $data
  ]);
}

注意： 确保上传的文件/目录存在于storage/app/public 目录中

示例： yourproject/storage/app/public/documents/recettes/45/Test name/45-Test name.jpg