[Vuejs]-Display image in Vue from storage folder with laravel

by

0👍

  1. Add a method to your controller (e.g. PostController):

    use Illuminate\Support\Facades\Storage;

/**
 * Display the specified resource.
 *
 * @param \App\Post $post
 * @return \Symfony\Component\HttpFoundation\BinaryFileResponse
 * @throws \Illuminate\Auth\Access\AuthorizationException
 */
public function image(Post $post)
{
    return response()->file(
        Storage::disk('local')->path($post->img_path)
    );
}

  2. Add a route to routes/web.php:

    Route::get('/posts/{post}/image', 'PostController@file')->name('posts.image');

  3. Use it like this:

    <img :src="`/posts/${post.id}/image`"/>

0👍

The first step, you should install

php artisan storage:link

In your vue file, you can use a regular img tag

<img :src="`/storage/${post.img_path}`" />

or,

<img :src="`/storage/userImages/${imageName}`" />

Note: You do not need to add "app/public" to the src attribute

Leave a comment