title: Vue and API: Displaying Image
body: <p>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}}.</p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main" v-cloak&gt;
    &lt;div class="col-sm-5"&gt;
      &lt;p v-for="picture in services.service_picture"&gt;&lt;/p&gt;
      &lt;img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /&gt; &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var main = new Vue({
    el: "#main",
    data: {
      services: [],
      path: 'https://examplemyapisource.com'
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>API from https://examplemyapisource.com
  [ 
    { "service_picture": "18_1516090191.jpg", } ]</code></pre>
  </div>
  </div>
  </p>