如何在Vue.js中绑定Laravel生成的url？

Question

在一个组件中，我正在使用Axios获取当前用户的数据。我得到了一个头像的网址，格式是：avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg

我需要将它插入到Storage::disk("s3")中。那么我如何让变量头像出现在我的组件中呢？

我试着这样做：<img :src="'Storage::disk("s3")->url(' + this.user.avatar + ')'">，但我得到一个错误...

Answer 1

我不确定您是在刀片视图中使用存储还是在组件中使用存储。为了清楚起见，我们不能在Vue组件中使用Storage外观。这只是给拉威尔的。

您有两个选择:允许组件接受一个属性，或者在Storage facade的帮助下创建一个返回URL的Laravel路由。

选项1-道具传球

在您的刀片视图中，

<my-component :src="'{{ Storage::disk("s3")->url(' + this.user.avatar + ')' }}">

选项2- Laravel路由

创建一条简单的路由，类似于

Route::get('api/my-avatar', UserController@getAvatar')

在您的UserController中

public function getAvatar()
{
    return Storage::disk("s3")->url( auth()->user()->avatar );
}

并从axios调用该路由。