CODEWITHSUNDEEP
laravel-5.3vuejs2
Lekz Flores
Lekz Flores

Reputation: 416

Laravel Facades in VueJS Template?

I just created a symbolic link using this command php artisan storage:link to be able to access my files from the web. I've known this from Laravel's official docs: https://laravel.com/docs/5.3/filesystem#configuration.

And so I'm using <img src="{{ Storage::url($user->avatar) }}"> in my blade template to get the path of my image.

My question is, how can I achieve similar approach using VueJS Template? I tried <img src="{{ Storage::url($user->avatar) }}"> in my .vue file but got an error when running gulp watch. The error throws an invalid expression. Simple means I can't use Laravel's Facades inside a .vue file?

What would be the best approach in getting the correct path of my image then? Use $avatar = Storage::url($user->avatar); and inject it to an array before getting it in .vue file?

For reference here's my:

VueJS File

<template>
    <div class="row">
        <div class="col-md-4" v-for="person in people">
            <div class="panel panel-default">
                <div class="panel-heading text-center">
                    {{ person.name }}
                </div>
                <div class="panel-body">
                    <img :src="person.avatar" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.$http.get('/people/')
            .then((res) => {
                console.log(res)
                this.people = res.body.people
            })
        },
        data() {
            return {
                people: '',
            }
        }
    }
</script>

Route

Route::group(['prefix' => 'people', 'middleware' => ['auth']], function () {
    Route::get('/', [
        'uses' => 'PeopleController@index',
        'as' => 'people',
    ]);
});

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class PeopleController extends Controller
{
    public function index () {
        $people = User::all();
        return response()->json(['people' => $people]);
    }
}

Upvotes: 2

Views: 733

Answers (1)

CUGreen
CUGreen

Reputation: 3184

Why not set the storage path in your User model. Create an avatar_url attribute in your model.

use Illuminate\Support\Facades\Storage;

class User extends Model {

    protected $appends = ['avatar_url'];

    ....

    public function getAvatarUrlAttribute() {
        return Storage::url($this->avatar);
    }

    ...

}

Then in your VueJS file...

<img :src="person.avatar_url" class="img-responsive">

Upvotes: 4

Related Questions