Javascript 从API加载vue.js中的图像

考虑这一点：

• API加载图像元数据的清单。这些图像有一个ID，并且通过另一个API调用从DB返回一个base64图像。清单的模型是

  attachmentRecord

  ，ID只是一个字段
• 我不希望将这些大字符串预加载到数组中（这样可以工作）

因此，我有以下内容（惰性加载任何清单更改）：

现在，网络调用进行得很好，ID正确地传入，我可以看到基本数据，但它们似乎没有到达包装器函数或src属性。它总是一片空白。我尝试用另一个promise来包装它，结果得到了一个返回src属性的promise。在Vue中，针对这种情况的最佳做法是什么

好的，到目前为止，我在康斯坦丁的帮助下做了以下更改： 我试图在没有辅助功能的情况下将其剥离：

Vue模板代码：

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

---

事实证明，Vue不像我想象的那样处理

async

/

wait

。因此，您必须将图像数据保存到

attachmentRecord

中的每个附件中。此

getAttachmentFromTask

方法现在在第一次访问时处理此问题，并为相应的附件对象填充

data

属性。在连续调用时，如果已填充该属性，则返回该属性。请注意

Vue.set（）

的用法，因为该属性在初始数据中不可用，但我们希望它是被动的。您甚至可以设置一个类似加载程序的备用图像，在较大的徽标出现之前，可以看到短暂闪烁的SO徽标，而不显示文本：

newvue({
el:“#应用程序”，
数据：{
附件：[{
身份证号码：1
}]
},
方法：{
getAttachmentFromTask（attachmentIndex，attachmentID）{
let record=this.attachmentRecord[attachmentIndex]；
如果（！record.data）{
Vue.set（记录“数据”，空）；
axios.get（）https://kunden.48design.de/stackoverflow/image-base64-api-mockup.json）。然后（（结果）=>{
Vue.set（记录“数据”，结果数据）；
});
}
返回此.attachmentRecord[attachmentIndex].data；
}
}
});
img{
最大宽度：100vw；
}

谢谢！这实际上解决了部分问题。我将标记为已解决。我仍然无法获取要更新的src属性。我可以中断
then（）
调用，返回一个值，但不会向src属性返回任何内容。所有I（fetchimage更改为getSrcImage）
getSrcImage:function（id）{let that=this；that.getAttachmentFromTask（id）.then（str=>{return str；}）；
也尝试过：
function（id）{let that=this；let buffer=”“；that.getAttachmentFromTask（id）.然后（str=>{buffer=str；})；return buffer；}
您又错过了异步/wait！
getSrcImage:async函数（id）{let returnValue；wait this.getAttachmentFromTask（id）。然后（str=>{returnValue=str；}）；returnValue；}
-
getAttachmentFromTask
的定义还必须有
async
关键字。src=[对象承诺]当我更改为
getSrcImage:async函数（id）{let that=this；let buffer=”“；等待它。getAttachmentFromTask（id）。然后（str=>{buffer=str；}）；返回buffer；}
我以前做实验时遇到过这个问题。简单的方法？Dankeschön！我知道SET，它通常用于使某些数组操作反应。我将其标记为已应答，但它本质上是缓存字符串。我想这是vue中的一个限制。我现在也完全理解async/Wait！
this.axios({
    method: "get",
    url: url,
 }).then(res => res.data)
   .catch(() => {
      alert("Unable to load raw attachment from this task and ID");
    });
 }

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