LARAVEL - 显示存储文件夹中的图像

LARAVEL - Displaying images from the storage folder

我是 Laravel 的新手,想知道是否有人可以帮助我上传简单​​的图片。

我有一个表单,允许用户在此过程中创建个人资料并上传个人资料和头像。这一切都很完美。这是来自我的控制器的代码:

if (request()->hasFile('avatar')) {

        $file = request()->file('avatar');

        $file->storeAs('avatars/' . auth()->id(), 'avatar.jpg');
    }

图片保存在storage/app/avatars/USER-ID/avatar.jpg

我不确定如何显示此文件夹中的图像。我一直在寻找解决方案,但我无法使用 php artisan storage:link,因为它不是我的服务器。如何在不使用存储 link 的情况下解决这个问题?我可以手动创建 link 吗?

如果有人能向我解释一个解决方案,那将是完美的!

只需询问您是否需要任何代码片段。

谢谢!

创建一个符号 link,它将连接 storage/apppublic/img 目录,例如:

ln -s /home/laravel/public/img /home/laravel/storage/app

然后只需使用 asset() 助手生成一个 link:

<img src="{{ asset('img/avatars/'.auth()->id().'/avatar.jpg') }}">

好吧,如果您无权访问服务器以创建符号链接,则需要创建一个 returns 图像作为响应的路由。

类似的东西:

Route::get('storage/{filename}', function ($filename) 
{
   $path = storage_path('avatars/' . $filename);

   if (!File::exists($path)) {
      abort(404);
   }

   $file = File::get($path);
   $type = File::mimeType($path);

   $response = Response::make($file, 200);
   $response->header("Content-Type", $type);

   return $response;
});

您将需要使用插入控制器的路由来访问受保护的文件,该控制器可以访问文件并将其传递给视图。

我还建议使用 intervention/image 包,它可以通过

安装

composer require intervention/image

有关访问图像的信息,请参见下文:

// 您在 web.php

中的路线
// Public route to show user avatar
Route::get('avatars/{id}/{image}', [
    'uses'      => 'TheNameOfYourController@userProfileAvatar'
]);

// 在你的控制器文件中。在这个例子中,根据我们上面的名称,它将是 userProfileAvatar()

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image;

class TheNameOfYourController extends Controller
{

    /**
     * Show user avatar
     *
     * @param $id
     * @param $image
     * @return string
     */
    public function userProfileAvatar($id, $image)
    {
        return Image::make(storage_path() . '/avatars/' . $id . '/' . $image)->response();
    }

}

// 您的 blade 视图显示图像

<img src="images/profile/{{ \Auth::user()->id }}/avatar.jpg" alt="{{ \Auth::user()->name }}">

这里有一些参考,但这个例子更进一步,在上传时将文件路径保存到数据库中:

// 路线示例

// 控制器示例

// 查看示例