html - Vue 和 API：显示图像

Question

我目前正在使用 Vue JS 并且数据来自 API 。要从 API 调用数据，我使用此方法 {{services.service_picture}}。

但问题是我无法使用下面的这种方法显示图像。您能否发送一些关于如何使用 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", } ]

标签： htmlimageapivue.jsvue-component

Answer 1

你在这里试试：

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