Question

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

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

var main = new Vue({
  el: "#main",
  data: {
    services: [],
    path: 'https://examplemyapisource.com'
  },
});

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

var form = FormApp.create("TEST FORM");
var fieldCount = 0;
var fields = [];
var fieldIds = [];
var field1 = form.addTextItem();
var title = "Field 1";
fields[fieldCount++] = title;
field1.setTitle(title);
var field2 = form.addTextItem();
title = "Field 2";
fields[fieldCount++] = title;
field2.setTitle(title);
var response = form.createResponse();
response.withItemResponse(field1.createResponse("TEST FIELD 1"));
response.withItemResponse(field2.createResponse("TEST FIELD 2"));
var url = response.toPrefilledUrl();
var split = url.split("entry.");
for (var x = 1; x < split.length; x++) {
    var split2 = split[x].split("=");
    fieldIds[x - 1] = split2[0];
}
for (var y = 0; y < fieldIds.length; y++) {
    Logger.Log("Field Name: " + fields[y] + "Field ID: " + fieldIds[y]);
}
delete response;

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>

Answer 2

黄虹的积分

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

Answer 3

请注意，您的v-for仅包含

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

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

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

Vue和API：显示图像

4 个答案: