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

Question

I'm using Laravel 8 with Docker on Windows 10 through WSL2 and Sail . I created a CRUD to store some articles with images in my DB. I'm trying to show images from laravel storage, but they are not appearing in the browser. How can I fix this?

ArticleController.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');
    }

I followed the Laravel 8 docs to storage my images using the public disk.

filesystem.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'),
    ]
];

I also created the link with the command line sail artisan storage:link Everything work well, because I can see the image in the right path: storage/app/images/my_image as follow:

enter image description here enter image description here

I have a problem when I try to show my image in the laravel blade as follow:

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

I think the problem is on the path because on the browser i can see that: <img class="w-full" src="http://localhost/storage/images/9D1GCN9XDEwRWq8zN2wiA6eBSazgg657f9uUs0Uj.png" alt="article_image"> and the image is not shown.

I tried everything, change the filesystem, change the path storage into the controller etc etc.. but I can't find a solution.

Answer 1

As the image path in the browser looks right, I think is a problem with the symbolic link to the public directory generated with sail artisan storage:link .

I had the same problem and solved it running php artisan storage:link from inside the container.

To me, the solution was making the link directly inside the container, not through 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

Doing sail artisan storage:link creates a wrong link with a non existing /var/www/html path outside the container.

Answer 2

I think you should put get()

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

If you don't define the disk like:

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

it will be in default disk ("local"). And to retrieve maybe you can put like:

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

A better approach would be:

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

Retrieve

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