How can I use vue variable inside laravel blade's image src?

Question

I am trying to use a vue variable inside blade and image src attribute but vue gives template compiling errors.

Where is what I am trying to do

<img src="uploads/@{{authUser.profilePic}}"/>

I could separate this as a pure template but vue template loads little bit slower than a blade file.

Any help would be greatly appreciated.

It gives ` Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead` but if I add :src it gives different error complain about { — Hkm Sadek
– Hkm Sadek, Commented Dec 13, 2017 at 14:29

Devon Bessemer · Accepted Answer · 2017-12-13 14:34:05Z

5

Interpolation inside attributes is not available on Vue 2. Instead you use v-bind:src or the shortcut :src to bind a Javascript expression to src.

<img :src="'uploads/' + authUser.profilePic"/>

The javascript expression being string concatenation:

'uploads/' + authUser.profilePic

answered Dec 13, 2017 at 14:34

Devon Bessemer

35.6k10 gold badges77 silver badges102 bronze badges

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

2 Comments

Hkm Sadek Over a year ago

Thanks. Got confused with laravel's {{}} and @ but thanks again for the answer!

Devon Bessemer Over a year ago

Yeah, you'd use @{{ var }} anywhere outside of attributes.

Collectives™ on Stack Overflow

How can I use vue variable inside laravel blade's image src?

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