javascript - 从 API 在 vue.js 中加载图像

Question

考虑一下:

• API 加载图像元数据 list 。这些图像有一个 ID，并且通过另一个 API 调用从数据库返回一个 base64 图像。 list 的模型是 attachmentRecord，ID 只是一个字段。
• 我宁愿不将这些大字符串预加载到一个数组中(这样可行)。

所以我有这个(延迟加载任何 list 更改):

<div v-for="(attachment, index) in  attachmentRecord" :key="index">
    <img :src="fetchImage(attachment.id)" />
</div> 

fetchimage() 是一个从 promise 返回的 axios 函数的包装器。 (凭内存写下):

this.axios({
    method: "get",
    url: url,
 }).then(res => res.data)
   .catch(() => {
      alert("Unable to load raw attachment from this task and ID");
    });
 }

现在，网络调用顺利通过，ID 正确传递，我可以看到基本 64 数据，但它们似乎没有进入包装函数或 src 属性。它总是空白。我试着把它包装在另一个 promise 中，只是为了得到一个返回到 src 属性的 promise 。对于这种情况，Vue 中的最佳实践是什么？

好的，到目前为止，我在 Constantin 的帮助下进行了这些更改:我试图在没有辅助函数的情况下将其剥离:

Vue模板代码:

<div v-for="(attachment, index) in  attachmentRecord" :key="index">
<img :src="getAttachmentFromTask(attachment.id)" />

基本方法:

async getAttachmentFromTask(attachmentID) {
  if (!attachmentID) alert("Unknown Attachment!");
  let sendBack = "";
  let url = "/server/..."

  await this.axios({
    method: "get",
    url: url
  })
    .then(res => {
      sendBack = res.data;
    })
    .catch(() => {
      alert("Unable to load raw attachment from this task and ID");
    });
  // >>>>>>>>>alerts base64 correctly; Vue loads [object Promise] in img
  alert(sendBack);
  return sendBack; 
}

Answer 1

事实证明，Vue 并没有像我想象的那样处理 async/await 。因此，您必须将图像数据保存到attachmentRecord 中的每个附件中。此 getAttachmentFromTask 方法现在会在第一次访问时处理此问题，并为相应的附件对象填充 data 属性。在连续的调用中，如果该属性已经填充，则返回该属性。 请注意 Vue.set() 的用法，因为该属性在初始数据中不可用，但我们希望它是响应式(Reactive)的。您甚至可以设置后备图像像装载机一样，在较大的 Logo 出现之前看到没有文本的短暂闪烁的 SO Logo :

new Vue({
  el: '#app',
  data: {
    attachmentRecord: [{
      id: 1
    }]
  },
  methods: {
    getAttachmentFromTask(attachmentIndex, attachmentID) {
      let record = this.attachmentRecord[attachmentIndex];
      if (!record.data) {
        Vue.set(record, 'data', null);
        axios.get('https://kunden.48design.de/stackoverflow/image-base64-api-mockup.json').then((result) => {
          Vue.set(record, 'data', result.data);
        });
      }
      return this.attachmentRecord[attachmentIndex].data;
    }
  }
});

img {
  max-width: 100vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <div v-for="(attachment, index) in  attachmentRecord" :key="index">
    <img :src="getAttachmentFromTask(index, attachment.id) || 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png'" />
  </div>
</div>

旧答案:(遗憾的是，目前 Vue 无法以这种方式工作)

Axios 请求默认是异步的。所以函数不会等待 then() 返回值。您可以在 fetchImage 函数名称之前添加 async 关键字，并在 this.axios 之前添加 await 关键字。然后让 then 回调将返回值分配给 fetchImage 函数范围内的变量，并让函数返回它。

async fetchImage() {
    let returnValue;
    await this.axios({
        method: "get",
        url: url,
     }).then(res => { returnValue = res.data; })
       .catch(() => {
          alert("Unable to load raw attachment from this task and ID");
        });
    return returnValue;
}