【问题标题】: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,您应该使用 -&gt; 运算符。

v-bind:src="{{ $activity-&gt;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">
        

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2019-02-10
          • 2021-06-15
          • 2016-11-22
          • 1970-01-01
          • 2020-05-13
          • 2021-10-05
          • 2018-02-06
          • 2017-01-07
          相关资源
          最近更新 更多