浏览器不显示 Laravel 存储中的图像

Question

我通过WSL2和Sail在 Windows 10 上将Laravel 8与Docker结合使用。我创建了一个 CRUD 来在数据库中存储一些带有图像的文章。我正在尝试显示来自 Laravel 存储的图像，但它们没有出现在浏览器中。我怎样才能解决这个问题？

文章控制器.php

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('admin.articles.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validatedData = $request->validate([
            'title' => 'required',
            'body' => 'required',
            'author' => 'required',
            'image' => 'nullable | image | max:1024'
        ]);

        $image = Storage::put('images', $request->image); 
        $validatedData['image'] = $image;

        Article::create($validatedData);

        return redirect()->route('admin.articles.index');
    }

我按照Laravel 8 文档使用公共磁盘存储我的图像。

文件系统.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DRIVER', 'public'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been setup for each driver as an example of the required options.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Symbolic Links
    |--------------------------------------------------------------------------
    |
    | Here you may configure the symbolic links that will be created when the
    | `storage:link` Artisan command is executed. The array keys should be
    | the locations of the links and the values should be their targets.
    |
    */

    'links' => [
        public_path('storage') => storage_path('app/public'),
    ]
];

我还使用命令行创建了链接sail artisan storage:link 一切正常，因为我可以在正确的路径中看到图像：storage/app/images/my_image如下所示：

在此输入图像描述 在 此输入图像描述

当我尝试在 Laravel Blade 中显示我的图像时遇到问题，如下所示：

<div class="flex justify-center flex-wrap">
    @foreach ($articles as $article)
        {{-- Articles --}}
        <div class="max-w-sm rounded overflow-hidden shadow-lg my-5 mx-2">
            <img class="w-full" src="{{ asset( 'storage/' . $article->image) }}" alt="article_image">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">
                    {{ $article->title }}
                </div>
                <p class="text-gray-700 text-base overflow-hidden h-16">{{ $article->body }}</p>
                <span class="inline-block bg-gray-200 rounded-full px-3 py-1 mt-3 text-sm font-semibold text-gray-700">{{ $article->author }}</span>
            </div>
        </div>
    @endforeach
</div>

我认为问题出在路径上，因为在浏览器上我可以看到： <img class="w-full" src="http://localhost/storage/images/9D1GCN9XDEwRWq8zN2wiA6eBSazgg657f9uUs0Uj.png" alt="article_image">并且图像未显示。

我尝试了一切，更改文件系统，将路径存储更改为控制器等等，但我找不到解决方案。

Answer 1

由于浏览器中的图像路径看起来正确，我认为使用 .生成的公共目录的符号链接存在问题sail artisan storage:link。

我遇到了同样的问题并解决了它php artisan storage:link从容器内部运行的问题。

对我来说，解决方案是直接在容器内建立链接，而不是通过 sail。

# Get inside the container. Replace "your-project-container" with the actual name.
docker exec -it your-project-container /bin/sh
# Change to user sail
su sail
# Run artisan storage:link
php artisan storage:link
# Exit twice to get out the container
exit
exit

这样做会sail artisan storage:link创建与容器外部不存在的 /var/www/html 路径的错误链接。