Vue 和 API：显示图像答案

【问题标题】：Vue and API: Displaying ImageVue 和 API：显示图像
【发布时间】：2018-12-13 10:40:26
【问题描述】：

我目前正在使用 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", } ]

【问题讨论】：

标签： html image api vue.js vue-component

【解决方案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>

【讨论】：

谢谢。我做了一些调整，然后它显示了图像

【解决方案2】：

感谢黄红

&lt;img :src="path+'/images/services/'+services.service_picture" class="img-circle" alt="Services"&gt;

【讨论】：

【解决方案3】：

注意你的 v-for 只包含

元素，因此你不能在元素内使用“图片”。

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

【讨论】：

是的。我改了

【解决方案4】：

您需要进行这些更改才能获得完美的图像。在这里你关闭了图片之前的<p>标签。关闭图片之后的<p>标签

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

【讨论】：