How to bind Laravel generated url in Vue.js?

Question

in a component, I am getting data for a current user with Axios. I get URL for an avatar in this format: avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg

I need to insert it into Storage::disk("s3"). So how would I let the variable avatar in my component?

I tried like this: <img :src="'Storage::disk("s3")->url(' + this.user.avatar + ')'"> But I get an error...

Not an error, it just doesn't render correctly. Renders: ")->url(' + this.user.avatar + ')'"> — Miha Vidakovic
– Miha Vidakovic, Commented Nov 21, 2017 at 0:48

Shafiq al-Shaar · Accepted Answer · 2022-06-20 19:32:29Z

2

Post 2022 answer:

It's best to use this package: https://github.com/tighten/ziggy

It allows you to use call route() in vue files.

2017 answer:

I'm not sure if you are using Storage in the blade view or the component. For clarity, one can't use the Storage facade in Vue components. It's only for Laravel.

You have two options: allow the component to accept a prop or create a Laravel route that returns the URL with the help of Storage facade.

#Option 1 - Prop passing

In your blade view,

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

#Option 2 - Laravel route

Create a simple route, something like

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

In your the UserController

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

and call that route from axios.

edited Jun 20, 2022 at 19:32

answered Nov 21, 2017 at 3:30

Shafiq al-Shaar

1,32314 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ultrasamad Over a year ago

In your second option can you show an example of how the image will be rendered in an <img .../> tag in vue. Will the src attribute of the image points to the laravel route directly?

Shafiq al-Shaar Over a year ago

@ultrasamad Yes, the src attribute will directly point to https://example.test/api/my-avatar.

Collectives™ on Stack Overflow

How to bind Laravel generated url in Vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related