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

Question

我在 Windows 10 上通过WSL2和Sail将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 刀片中显示我的图像时遇到问题，如下所示：

<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解决了它。

对我来说，解决方案是直接在集装箱内建立链接，而不是通过帆。

# 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 路径。

Answer 2

我认为你应该把get()

$image = Storage::put('images', $request->image->get());

如果您没有像这样定义磁盘：

Storage::disk('public')->put('images', $request->image->get());

它将在默认磁盘（“本地”）中。 并检索也许你可以像这样：

<img class="w-full" src="{{ Storage::url('storage/' . $article->image) }}" alt="article_image">

更好的方法是：

$path = "image_" . time() . '.' . $request->image->extension();
Storage::disk('public')->put($path, $request->image->get());
Article::create([...,
   'image'=>$path,
]);

取回

<img class="w-full" src="{{ Storage::url($article->image) }}" alt="article_image">