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

时间:2018-10-10 13:12:01

标签: php laravel image file-upload

我有一个包含多个字段的表单,用于存储包括图片上传在内的信息。 还有一个编辑视图:

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,找不到404,但没有附加的/ 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)

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

谢谢。

4 个答案:

答案 0 :(得分:0)

如果您使用存储文件夹来保存图像,则应使用 Storage :: url

确保运行命令 php artisan storage:link

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

答案 1 :(得分:0)

您获得的临时路径来自图像本身。

为什么?由于在移动图像后没有设置图像新路径,因此图像存储在临时存储器中。

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

您需要在Link对象上显式设置其路径,如下所示:

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

答案 2 :(得分:0)

我认为这是因为您无法从视图访问上载文件夹。 我建议创建一个控制器,将您的图像保存在上载文件夹中并发送图像响应。像这样:

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命令

答案 3 :(得分:0)

这些都是有效的观点,尽管我的框架的设置不能很好地配合建议。我现在已经实施了一种解决方法。

这是Web控制器中的更新代码:

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

非常感谢您提供的所有帮助!