在视图中显示存储中的图像答案

【问题标题】：Display image from storage in view在视图中显示存储中的图像
【发布时间】：2019-03-15 09:58:46
【问题描述】：

我有一个包含多个字段的表单，其中存储包括图像上传在内的信息。 还有一个编辑视图：

Route::PUT('/link/{link}', function (Request $request, Link $link) {
  $request->validate([
    'name' => 'required|max:255',
    'title' => 'required|max:255',
    'cell' => 'required|max:255',
    'tel' => 'required|max:255',
    'email' => 'required|max:255',
    'website' => 'required|url|max:255',
    'location' => 'required|max:255',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $img = $request->file('image');

  $newfilename = $request->name;

  $img->move(public_path("/uploads"), $newfilename);

  $link->update($request->all());

  return redirect('/');
});

初始提交和编辑工作正常，同时更改图像文件名并将其存储在上传文件夹中。

生成的路径为：

public/uploads/exampleFileName.jpg

这里的问题是在主视图中显示图像时。下面的代码生成了一个 404 not found 和一个额外的 /tmp/ 路径，我不知道它来自哪里。

主页视图中的代码：

@foreach ($links as $link)
    <div class="link-box">
      <h5 class="off-white-txt">Card [# {{ $link->id }}]</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Name: </span>{{ $link->name }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Title: </span>{{ $link->title }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Cell: </span>{{ $link->cell }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Tel: </span>{{ $link->tel }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Email: </span>{{ $link->email }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Website: </span>{{ $link->website }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Location: </span>{{ $link->location }}</h5>

  <img src="{{url('uploads'.$link->image) }}" class="off-white-txt">
</div>

控制台中的错误信息：

GET http://192.168.10.10/uploads/tmp/phpdtnTcw 404 (Not Found)

我的问题如下；如何编辑我的代码以指向正确的路径并显示图像？

提前谢谢你。

【问题讨论】：

您是否尝试过保存图像而不是移动它？在您移动图像时，图像并未存储在您的应用程序中。

标签： php laravel image file-upload

【解决方案1】：

如果您使用存储文件夹来保存图像，那么您应该使用 Storage::url

确保运行命令php artisan storage:link

  <img src="{{ Storage::url($link->image) }}" class="off-white-txt">

【讨论】：

我同意这种做法。最好将文件存储在 storage 中并使用 storage:link 命令为该目录创建符号链接，然后您可以将存储文件作为公共文件访问。创建链接后，您甚至可以使用资产（文件的路径）助手而不是图像标签。您无法访问存储目录的文件。

【解决方案2】：

你得到的临时路径来自图像本身。

为什么？因为移动图像后没有设置图像新路径，所以图像存储在临时存储中。

为简化起见，您确实将图像保存在public 文件夹下，但image 路径仍在temp 存储中。这是图像所在的位置。这个临时存储是每个UploadedFile 对象的默认路径

您需要在Link 对象上明确设置它的路径，如下所示：

$link->image = 'my new path';
$link->save();

【讨论】：

【解决方案3】：

我认为这是因为您无法从视图访问上传文件夹。我建议创建一个控制器，将您的图像放入上传文件夹并发送图像响应。像这样：

public function showImage($image)
{
    if (!Storage::exists($image->name)) {
        return false;
    }

    $file = Storage::get($image->name);
    $type = Storage::mimeType($image->name);
    $response = Response::make($file, 200)->header("Content-Type", $type);

    return $response;
}

然后你只需要调用指向你的控制器方法的正确路由：

<img src="{{ route('getMyImage', $image) }}" />

这样您可以轻松保护您上传文件夹中的文件（例如：放置中间件或用户控制功能...）。否则你可以执行php artisan storage:link 命令

【讨论】：

【解决方案4】：

这些都是有效的观点，尽管我的框架设置与建议不符。我现在已经实施了一个解决方法。

这是网络控制器中的更新代码：

Route::post('/submit', function (Request $request) {
  $data = $request->validate([
      'name' => 'required|max:255',
      'title' => 'required|max:255',
      'cell' => 'required|max:255',
      'tel' => 'required|max:255',
      'email' => 'required|max:255',
      'website' => 'required|url|max:255',
      'location' => 'required|max:255',
      'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $img = $request->file('image');
  // Storage::disk('public')->put('uploads', $img);

  $newfilename = $request->name;
  $img->move(public_path("/uploads"), $newfilename);

  $link = tap(new App\Link($data))->save();

  return redirect('/');
});

这是更新后的视图代码：

<img src="/uploads/{{ $link->name }}" class="user-img">

非常感谢您的帮助！

【讨论】：