Laravel VueJS 模板中的外观？

Question

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

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

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

那么获取图像正确路径的最佳方法是什么？使用 $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]);
    }
}

Answer 1

为什么不在用户模型中设置存储路径。在您的模型中创建一个 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">

Laravel VueJS 模板中的外观？

Laravel Facades in VueJS Template?

laravel-5.3

vuejs2