Vue and API: Displaying Image

问题

I am currently using Vue JS and the data is coming from API . to call a data from API I use this method {{services.service_picture}}.

But the problem is I am unable to display the image with this method below. Can you please send some ideas on how to display it using 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", } ]

回答1:

You try here:

<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>

回答2:

Credits to Huang Hong

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

回答3:

Note the your v-for only includes the

element, therfore you cannot use 'picture' inside the element.

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

回答4:

You need to make these changes to get a perfect image. Here you closed the <p> tag before the image.close that <p> tag after image

<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>

来源：https://stackoverflow.com/questions/51182984/vue-and-api-displaying-image