VueJS模板中的Laravel Facades?

时间:2016-12-23 01:10:42

标签: laravel-5.3 vuejs2

我刚刚使用此命令php artisan storage:link创建了一个符号链接,以便能够从网络访问我的文件。我从Laravel的官方文档中了解到这一点:https://laravel.com/docs/5.3/filesystem#configuration

所以我在我的刀片模板中使用<img src="{{ Storage::url($user->avatar) }}">来获取图像的路径。

我的问题是,如何使用VueJS模板实现类似的方法? 我在<img src="{{ Storage::url($user->avatar) }}">文件中尝试.vue,但在运行gulp watch时遇到错误。该错误会抛出无效的表达式。简单意味着我无法在Laravel's Facades文件中使用.vue

获得正确的图像路径的最佳方法是什么?使用$avatar = Storage::url($user->avatar);并将其注入数组,然后将其输入.vue文件?

这里的参考是我的:

VueJS档案

<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::group(['prefix' => 'people', 'middleware' => ['auth']], function () {
    Route::get('/', [
        'uses' => 'PeopleController@index',
        'as' => 'people',
    ]);
});

控制器

<?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]);
    }
}

1 个答案:

答案 0 :(得分:4)

为什么不在用户模型中设置存储路径。 在模型中创建avatar_url属性。

use Illuminate\Support\Facades\Storage;

class User extends Model {

    protected $appends = ['avatar_url'];

    ....

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

    ...

}

然后在你的VueJS档案......

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