Vue и API: отображение изображения

Question

В настоящее время я использую Vue JS, и данные поступают из API. для вызова данных из API я использую этот метод {{services.service_picture}}.

Но проблема в том, что я не могу отобразить изображение с помощью этого метода ниже. Не могли бы вы прислать несколько идей о том, как отобразить его с помощью Vue JS

<div id="main" v-cloak>
  <div class="col-sm-5">
    <p v-for="picture in services.service_picture"></p>
    <img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /> </div>
</div>

var main = new Vue({
  el: "#main",
  data: {
    services: [],
    path: 'https://examplemyapisource.com'
  },
});

API from https://examplemyapisource.com
[ 
  { "service_picture": "18_1516090191.jpg", } ]

Answer 1

Вам необходимо внести эти изменения, чтобы получить идеальное изображение. Здесь вы закрыли тег <p> до изображения. Закройте тег <p> после изображения

<div id="main" v-cloak>
   <div class="col-sm-5">
   <p v-for="picture in services">
      <img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
   </p>
</div>

Answer 2

Кредиты Хуан Хун

<img :src="path+'/images/services/'+services.service_picture" class="img-circle" alt="Services">

Answer 3

Обратите внимание, что ваш v-for включает только элемент

, поэтому вы не можете использовать 'picture' внутри элемента.

<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" />

Answer 4

Вы попробуйте здесь:

<div id="main" v-cloak>
  <div class="col-sm-5">
    <p v-for="picture in services"></p>
    <img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</div>