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

Hưng hoàng · Accepted Answer · 2018-07-05 04:03:20Z

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 5, 2018 at 4:03

Hưng hoàng

3562 gold badges5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sasuke Scend Over a year ago

thank you .I made some adjustments then it displayed the image

Sasuke Scend · Accepted Answer · 2018-07-05 04:45:48Z

0

Credits to Huang Hong

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

edited Jul 5, 2018 at 4:45

answered Jul 5, 2018 at 4:11

Sasuke Scend

1111 gold badge2 silver badges11 bronze badges

Comments

Yaniv Peretz · Accepted Answer · 2018-07-07 12:11:26Z

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 7, 2018 at 12:11

Yaniv Peretz

1,1682 gold badges13 silver badges22 bronze badges

2 Comments

Sasuke Scend Over a year ago

Yes. I changed it

Sasuke Scend Over a year ago

Bhaskararao Gummidi · Accepted Answer · 2018-10-08 10:50:20Z

0

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>

answered Oct 8, 2018 at 10:50

Bhaskararao Gummidi

2,5931 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

Vue and API: Displaying Image

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related