使用 VueJS 和 Laravel 显示图像答案

【问题标题】：Display images with VueJS and Laravel使用 VueJS 和 Laravel 显示图像
【发布时间】：2018-05-28 01:58:28
【问题描述】：

我正在尝试使用 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

我该怎么做？

【问题讨论】：

activity.image 来自哪里？ Vue 还是 PHP？
我们能看到你代码的脚本部分吗？
活动对象中有什么？您可以将其粘贴到您的问题中吗？

标签： php image laravel vue.js

【解决方案1】：

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

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

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

v-bind:src="{{ $activity->image }}"，Blade 渲染需要这些胡须，而 Vue 不需要这些胡须。

【讨论】：

v-bind:src="activity.image" 是解决方案。我不认为我会想到它。谢谢。
记住，当使用v-bind 时，您不需要进行插值，也就是{{}} :)

【解决方案2】：

这样试试

<img :src="'/images/'+item.images" alt="image" />

【讨论】：

【解决方案3】：

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

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案4】：

你可以直接指向图片：

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

【讨论】：

【解决方案5】：

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

在我的刀片文件中

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

Vue 组件

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

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

【讨论】：