使用 VueJS 和 Laravel 显示图像 [英] Display images with VueJS and Laravel
问题描述
我正在尝试使用 VueJS 显示图像,但它要么打印 {{ activity.image }}
要么显示编译错误.这些是尝试:
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
我该怎么做?
推荐答案
我假设 activity.image
来自 JavaScript,因为您使用的是点表示法.
I assume activity.image
is coming from the JavaScript, since you're using the dot notation.
你可以使用 v-bind:src="activity.image"
,是的,没有胡子.
You can use v-bind:src="activity.image"
, yes, without the mustache.
或者如果它来自 PHP,你应该使用 ->
操作符.
or if it came from PHP, you should be using the ->
operator.
v-bind:src="{{ $activity->image }}"
,Blade 渲染需要那些胡子,而 Vue 不需要这些胡子.
v-bind:src="{{ $activity->image }}"
, you need those mustache for the Blade rendering, however you don't need the mustache for the Vue.
这篇关于使用 VueJS 和 Laravel 显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!