Javascript 使用Express下载图像，并使用AJAX在Vue中显示

我遇到了一个问题，也许你们中的一些人有答案。我有一个类似仪表板的应用程序运行在MEVN堆栈上。我希望用户能够上载其图像并将其存储在后端服务器中，因为据我所知，无法直接上载到VueJS项目公用文件夹

所以我找到了一个上传的方法，多亏了我在这里找到的一些帖子。但是我找不到回去的路。我的映像存储在后端服务器上，我希望使用axios以blob形式获取它，并在VueJS中显示它。这应该很简单，但我可能会错过一些东西

首先，我获取图像文件的名称，并使用Express将其按如下方式发送：

res.sendfile（path.join（uu dirname，“../../images/societies/”，result.img_link））

如果没有图像，我也会返回一个默认的图像url，这很好，但不会返回获取的图像。问题是我不能直接使用URL访问图像，它是不可访问的。所以我必须找到一种方法，让它成为一个斑点，我猜，并显示它

以下是我用于在前端VueJS（脚本部分）中获取图像的代码：

以下是作为v-for指令一部分的模板部分中的代码：

<img
    :src="getSocietyImage(society)"
    alt="content-img"
    class="responsive card-img-top"
/>



下面是我从console.log（）的请求中得到的信息：

谢谢大家的帮助
 问题1：模板方法
你不应该拘泥于方法。该方法将在每次重新呈现模板时运行，这意味着每当某些相关数据发生更改时

问题2：模板异步
模板呈现是同步的，这意味着您根本无法绑定到异步方法。您应该使用生命周期挂钩（本例使用URL）：


newvue({
el:“应用程序”，
数据（）{
返回{
myimage:null
}
},
方法：{
异步getImage（）{
//只是一个异步返回的模型
返回等待'https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg';
}   
},
异步创建（）{
this.myimage=等待this.getImage（）；
}
});

您如何确定“我无法使用URL直接访问图像，它不可访问”？如果您仍然希望显示本地已有的二进制图像，则应将其转换为base64字符串，结果字符串应为如下所示的数据URL:
data:image/png；base64，
关于数据URL，请参见这里的Hi@JonathanMondaut，这对您来说是如何实现的？嗨！对不起，我这个周末休假了！我试过了，真的很棒！非常感谢，它还提供了有关Vue的信息！我想，如果我的文件不是png，但是jpg，它可以用同样的方法来改变前缀吗？嗨，我很高兴它有帮助。它也会像jpg一样工作。另外，您实际上不必转换为Base64，我还添加了原始二进制文件的信息，这可能更可取。
<img
    :src="getSocietyImage(society)"
    alt="content-img"
    class="responsive card-img-top"
/>