我刚刚使用此命令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]);
}
}
答案 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">