VueJSとLaravelで画像を表示

Question

VueJSで画像を表示しようとしていますが、{{ activity.image }}を出力するか、コンパイルエラーが表示されます。これらは試行です：

<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 

どうすればいいですか？

Answer 1

ドット表記を使用しているため、activity.imageがJavaScriptから来ているとします。

v-bind:src="activity.image"はい、口ひげなしで使用できます。

PHPから来たものである場合は、->演算子を使用する必要があります。

v-bind:src="{{ $activity->image }}"の場合、Bladeレンダリングのためのひげ剃りが必要ですが、Vueのひげ剃りは必要ありません。