Vue and API: Displaying Image

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

score 2 · Answer 1 · answered Jul 05 '18 at 04:03

2

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>

answered Jul 05 '18 at 04:03

Hưng hoàng

360
2
5
18

thank you .I made some adjustments then it displayed the image – Sasuke Scend Jul 05 '18 at 04:09

Sasuke Scend · Answer 2 · 2018-07-05T04:45:48.740

0

Credits to Huang Hong

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

edited Jul 05 '18 at 04:45

answered Jul 05 '18 at 04:11

Sasuke Scend

111
1
2
11

score 0 · Answer 3 · answered Jul 07 '18 at 12:11

0

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

answered Jul 07 '18 at 12:11

Yaniv Peretz

1,118
2
13
22

Yes. I changed it – Sasuke Scend Jul 09 '18 at 03:37
– Sasuke Scend Jul 09 '18 at 03:37

score 0 · Answer 4 · answered Oct 08 '18 at 10:50

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>

Vue and API: Displaying Image

4 Answers4

Linked