I am trying to display images with VueJS, but it either prints {{ activity.image }}
or shows a compilation error. These are the attempts:
<img :src="'{{ activity.image }}'"> // Displays {{ activity.image }} <img :src="{{ activity.image }}"> // Error <img :src="'@{{ activity.image }}'"> // Displays @{{ activity.image }} <img v-bind="src:'{{ activity.image }}'" alt=""> // Error <img v-attr="src:'{{ activity.image }}'" alt=""> // Error <img :src={{ activity.image }} alt=""> // Error
How do I do it?
Advertisement
Answer
I assume activity.image
is coming from the JavaScript, since you’re using the dot notation.
You can use v-bind:src="activity.image"
, yes, without the mustache.
or if it came from PHP, you should be using the ->
operator.
v-bind:src="{{ $activity->image }}"
, you need those mustache for the Blade rendering, however you don’t need the mustache for the Vue.