Vue和API：显示图像

Question

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", } ] 

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

Answer 2

归功于黄虹

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

Answer 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" />

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