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

尝试这样

<STX><ESC>C0<ETX>
<STX><ESC>k<ETX>
<STX><SI>N60<ETX>
<STX><SI>L300<ETX>
<STX><SI>S30<ETX>
<STX><SI>d0<ETX>
<STX><SI>h0,0;<ETX>
<STX><SI>l8<ETX>
<STX><SI>I2<ETX>
<STX><SI>F0<ETX>
<STX><SI>D0<ETX>
<STX><SI>T0<ETX>
<STX><SI>t0<ETX>
<STX><SI>g1,567<ETX>
<STX><ESC>P<ETX>
<STX>E*;F*;<ETX>
<STX>L1;<ETX>
<STX>D0;<ETX>
<STX>H0;o271,37;f3;c25;h9;w8;d0,30;<ETX>
<STX>D1;<ETX>
<STX>H1;o246,9;f3;c26;h13;w12;d0,30;<ETX>
<STX>H2;o243,422;f3;c25;h11;w11;d0,7;<ETX>
<STX>H3;o243,494;f3;c25;h11;w11;d0,8;<ETX>
<STX>H4;o218,10;f3;c25;h11;w11;d0,7;<ETX>
<STX>H5;o178,10;f3;c26;h13;w12;d0,44;<ETX>
<STX>H6;o145,10;f3;c25;h11;w11;d0,46;<ETX>
<STX>H7;o118,9;f3;c25;h11;w11;d0,46;<ETX>
<STX>H8;o91,9;f3;c25;h11;w11;d0,46;<ETX>
<STX>H9;o34,494;f3;c25;h11;w11;d0,6;<ETX>
<STX>H10;o34,408;f3;c25;h11;w11;d0,8;<ETX>
<STX>H11;o297,37;f3;c26;h9;w8;d0,39;<ETX>
<STX>H12;o34,9;f3;c25;h11;w11;d0,12;<ETX>
<STX>H13;o220,97;f3;c25;h11;w11;d0,10;<ETX>
<STX>H14;o34,318;f3;c25;h11;w11;d0,7;<ETX>
<STX>H15;o63,274;f3;c25;h11;w11;d0,22;<ETX>
<STX>H16;o221,426;f3;c25;h11;w11;d0,5;<ETX>
<STX>H17;o221,475;f3;c25;h11;w11;d0,9;<ETX>
<STX>H18;o194,442;f3;c25;h8;w9;d0,8;<ETX>
<STX>H19;o62,10;f3;c25;h11;w11;d0,12;<ETX>
<STX>H20;o33,161;f3;c25;h11;w11;d0,6;<ETX>
<STX>H21;o30,226;f3;c25;h9;w9;d0,8;<ETX>
<STX>L22;o243,6;f3;l600;w1;<ETX>
<STX>H23;o270,320;f3;c26;h9;w8;d0,18;<ETX>
<STX>H24;o298,413;f3;c25;h9;w8;d0,18;<ETX>
<STX>H25;o62,161;f3;c25;h11;w11;d0,6;<ETX>
<STX>H26;o195,509;f3;c25;h8;w9;d0,3;<ETX>
<STX>H27;o195,432;f3;c25;h8;w9;d0,3;<ETX>
<STX>R<ETX>
<STX><ESC>E*<CAN><ETX>
<STX><ESC>F0<DEL>Organization Name<ETX>
<STX><ESC>F1<DEL>$p_name$<ETX>
<STX><ESC>F2<DEL>$lpg$<ETX>
<STX><ESC>F3<DEL>$pg$<ETX>
<STX><ESC>F4<DEL>$lcb$<ETX>
<STX><ESC>F5<DEL>$dr$<ETX>
<STX><ESC>F6<DEL>$instructions_line1$<ETX>
<STX><ESC>F7<DEL>$instructions_line2$<ETX>
<STX><ESC>F8<DEL>$instructions_line3$<ETX>
<STX><ESC>F9<DEL>$du$<ETX>
<STX><ESC>F10<DEL>$q$<ETX>
<STX><ESC>F11<DEL>Organization Name<ETX>
<STX><ESC>F12<DEL>$disp_dt$<ETX>
<STX><ESC>F13<DEL>$cb$<ETX>
<STX><ESC>F14<DEL>$0.00<ETX>
<STX><ESC>F15<DEL>Dr. $pres$<ETX>
<STX><ESC>F16<DEL>$x$<ETX>
<STX><ESC>F17<DEL>$rx$<ETX>
<STX><ESC>F18<DEL>$transno$<ETX>
<STX><ESC>F19<DEL>$din$<ETX>
<STX><ESC>F20<DEL>$IN$<ETX>
<STX><ESC>F21<DEL>$page$<ETX>
<STX><ESC>F23<DEL>(111 222-345<ETX>
<STX><ESC>F24<DEL>Test<ETX>
<STX><ESC>F25<DEL>$m$<ETX>
<STX><ESC>F26<DEL>)<ETX>
<STX><ESC>F27<DEL>(<ETX>
<STX><RS>1<US>1<ETB><FF><ETX>

Answer 2

我认为activity.image来自JavaScript，因为您使用的是点符号。

你可以使用v-bind:src="activity.image"，是的，没有小胡子。

或者如果它来自PHP，您应该使用->运算符。

v-bind:src="{{ $activity->image }}"，你需要那些胡子来进行Blade渲染，但是你不需要Vue的胡子。

Answer 3

试试这样：
注意：img 在公共文件夹中

 
 <templete>
    <img :src="getImage()" class="card-img-top" alt="" />
 </templete>
 <script>
 export default {
           methods:{
                      getImage(){
                          return  'img/images.jpg';
                      }
                  }
             }
  </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 4

也许有人有类似的问题。我使用 Vue2，以 Vuetify2 和 Laravel 作为我的后端。我尝试首先在我的 Blade 文件中显示我的图像，然后在我的 Vue 组件中使用正确的路径来解决这个问题。这对我有用：

在我的刀片文件中

<img src="{{ asset('images/aaa.jpg') }}">

Vue 组件

<img src="images/aaa.jpg">

我尝试了各种动态绑定等方法，但最终奏效了。

Answer 5

您可以直接指向图像：

<img src="/images/logo.png">

使用VueJS和Laravel显示图像

5 个答案: