Vue和API:显示图像 [英] Vue and API: Displaying Image

问题描述

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

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

但是问题是我无法通过下面的方法显示图像.能否请您发送一些有关如何使用Vue JS进行显示的想法

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'
  },
});

来自https://examplemyapisource.com的

API from https://examplemyapisource.com
[ 
  { "service_picture": "18_1516090191.jpg", } ]

推荐答案

您可以在这里尝试

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

这篇关于Vue和API:显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！