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

Question

在一个组件中，我正在使用 Axios 获取当前用户的数据。 我以这种格式获取头像的 URL： avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg

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

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

Answer 1

2022年后答案：

最好使用这个包： https ://github.com/tighten/ziggy

它允许您在 vue 文件中使用 call route() 。

---

2017年回答：

我不确定您是在刀片视图还是组件中使用存储。 为清楚起见，不能在 Vue 组件中使用Storage门面。 它仅适用于 Laravel。

你有两个选择：允许组件接受一个 prop 或创建一个 Laravel 路由，该路由在Storage门面的帮助下返回 URL。

#Option 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 调用该路由。