从 API 加载 vue.js 中的图像

Question

考虑一下：

• API 加载图像元数据的清单。 图像具有 ID，并且通过另一个 API 调用从数据库返回 base64 图像。 清单的 model 是attachmentRecord记录，ID 只是一个字段。
• 我宁愿不将这些大字符串预加载到一个数组中（这会起作用）。

所以我有这个（在任何清单更改时都会延迟加载）：

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

fetchimage()是 axios function 的包装器，它从 promise 返回。 （凭记忆写）：

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

现在，网络通过正常调用 go，ID 正确传递，我可以看到基本的 64 数据，但它们似乎没有将其封装到 function 或 src 属性中。 它总是空白。 我尝试将它包装在另一个 promise 中，只是为了让 promise 回到 src 属性。 在 Vue 中，这种情况的最佳实践是什么？

好的，到目前为止，我在康斯坦丁的帮助下进行了这些更改：我试图在没有助手 function 的情况下将其剥离：

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 中的每个attachmentRecord 。 此getAttachmentFromTask方法现在在第一次访问时处理此问题，并为相应的附件 object 填充data属性。 在连续调用中，如果该属性已被填充，则返回该属性。 请注意Vue.set()的用法，因为该属性在初始数据中不可用，但我们希望它是响应式的。 您甚至可以像加载程序一样设置后备图像，在较大的徽标出现之前查看没有文字的短暂闪烁的 SO 徽标：

 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 请求默认是异步的。 所以 function 不会等待then()返回值。 您可以在fetchImage function 名称之前添加async关键字，并在this.axios之前添加await关键字。 然后让then回调将返回值分配给fetchImage function scope 中的变量，并让 function 返回它。

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