时间戳

首页 > 解决方案 > v-for 和 :src 的问题指向 Vuejs 中的反应变量

javascript - v-for 和 :src 的问题指向 Vuejs 中的反应变量

问题描述

我在 v-for 内部有一个问题，在这个 v-for 内部我创建了几个图像，它们的 src 指向一个保存在反应数组中的对象。这个数组是从返回这种类型的对象的 fetch 中获得的：

{
categoria:"Web"
data:"2018-02-20 00:00:00"
idgaleria:"1"
titol:"Web technologies"
url:"http://www.laqshya.in/images/web1.png"
}

这是模板内的 v-for：

<div v-for="entrada in entrades">
   <div class="caption">
        <img src="{{entrada.url}}" alt="" class="pic"/>
   </div>
   <h4>{{entrada.titol}}</h4>
   <p>Publicat el {{entrada.data}}</p>
</div>

结果是模板渲染没有任何问题，但是图像不可见，如果我查看浏览器元素检查器，我可以看到图像元素渲染如下

<img src="'{{entrada.url}}'" alt="" class="pic">

有谁知道如何在图像的 src 属性中引用反应变量？我一直在互联网上搜索同样的问题，并且我看到它发生在更多人身上，但都是指存储在本地而不是互联网上的图像，就像我的情况一样。谢谢！

标签： javascripthtmlvue.js

解决方案

尝试

  <img :src="entrada.url" alt="" class="pic"/>

或者

  <img v-bind:src="entrada.url" alt="" class="pic"/>

它们是相同的，一个是速记语法。没有它，引号中的内容将被解释为字符串，而不是代码。

推荐阅读