Блог

Я новичок в программировании на 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. В чем моя ошибка?

Вы можете использовать атрибут shorthand : или v-bind для привязки

Это должно быть так

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

или

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