vue.js - 如何在 Vue 中将道具传递给 img src？

Question

我是 Vue 编程的新手，刚刚编写了一个简单的脚本，通过 Axios 接口获取书籍元数据，然后显示书籍列表。效果很好。

但现在我想展示一本带有模板的书。

 Vue.component('my-book', {
  props: ['title','body','coverimg'],
  template: `
    <li class="row-animated border-bo-dd mb10 pb10 imgshadow">{{ title }}{{ body }}{{ coverimg }}
    <img class="pointer fl mr10"  src= "{{coverimg}}" />
    </li>
  `
});

<my-book
  v-for="book in bookFeed"
  v-bind:key="book.id"
  v-bind:title="book.node_title"
  v-bind:body="book.body"
  v-bind:path="book.path"
  v-bind:coverimg="book.medium_img" >
</my-book>

在模板中，我输出传递的道具用于测试目的。但我不能做的是将coverimg 作为一个URl 分配给img 标签。我的错误在哪里？

标签： vue.js

Answer 1

您可以使用速记:或v-bind绑定属性

应该是这样的

<img class="pointer fl mr10"  :src= "coverimg" />

或者

<img class="pointer fl mr10"  v-bind:src= "coverimg" />