Vuejs and curly braces in src

Use the below instead

Well that didn't work from my mobile....

Replace src with v-attr=src:

Hopefully that makes sense

Indeed, now you've said it, it's kind of obvious...

Bit of a D'oh! moment haha.

@Nublust Did you solve the problem by adopting <img v-attr="src:'path/to/the/image'"/>?

I am also having the problem with Laravel 5.0.16 and Vuejs 0.12.10

// The following renders the image correctly with one error like:
// GET http://localhost:8000/%7B%7Bthumbnail.high%7D%7D 404 (Not Found)
<img src="@{{thumbnail.high}}" alt="@{{title}}"/>

To remove the error message, I referred to the official Vuejs docs, which is:

The src attribute on an element makes an HTTP request when a value is set, so when the template is first parsed it will result in a 404. In this case v-attr is preferred.

So I did...

// But the page does not render, and it produces following warning and errors:
// [Vue warn]: Invalid expression. Generated function body:  {{scope.thumbnail.high}} - vue.js 1484
// Uncaught TypeError: Cannot read property 'get' of undefined - vue.js 3083
<img v-attr="src:@{{thumbnail.high}}" alt="@{{title}}"/>

// Seems that Laravel responses correctly 
// and the browser receives the html correctly when inspecting chrome dev tool - network and source panel
// then what happens to the vuejs?
<img v-attr="src:{{thumbnail.high}}" alt="{{title}}"/>

Anybody know the solution?

I got the answer from the creator of Vuejs. The fact is that I should have not used mustache in v-attr, since it's already an expression. So the code should be:

<img v-attr="src: thumbnail.high" alt="@{{title}}"/>

I do the brackets by mistake all the dang time. I blame blade....

For some reason this:

<img v-attr="src:'https://foobar'+'.com'"

or this:

<img v-bind="src:'https://foobar'+'.com'"

did not work.

<img :src="'https://foobar'+'.com'"

This however worked. Not sure why since it should be just a v-bind.