OS-Ubuntu 18.04 电子-6.1.5 vue-cli-plugin-electron-builder-1.4.2 Vue-2.6.10 验证-2.1.12 节点-10.13.0

我有一个应用程序，允许用户上传图像并通过查看器js https://github.com/fengyuanchen/viewerjs在图库视图中显示它们。 上传后，我会通过电子的主要过程在本地写入图像（我写这是为了减少内存 约束）。写入图像后，写入完成后，我会向渲染器进程发送一个具有唯一ID的事件。 我使用唯一的ID作为文件名来存储图像，以便可以通过此ID检索它以将其集成到图库中。 当我从渲染器中的主进程接收到事件和ID时，我将ID推入“ doc Transactions”数组中。 为了填充查看器画布中的图像，我遍历“ doc Transactions”数组，并尝试创建一个像这样的画布：

<ul ref="images" class="showImage">
      <li v-for="(image,index) in docsAdded" :key="index">
        <img
          :src="getLocation(image._id)">
      </li>
</ul>

methods:{
    getLocation(id){
        const userDataPath = remote.app.getPath("userData");
        const filename = `${id}.png`
        let imagesLoc = require.context(userDataPath,true,/\.png$/);
        return imagesLoc("./" + filename);
    }
}

这在加载图像时无济于事，但由于某种原因，它不断地反复编译。 当我使用静态文件名测试它时，它会完美工作：

methods:{
    getLocation(id){
        const userDataPath = remote.app.getPath("userData");
        let imagesLoc = require.context(userDataPath,/\.png$/);
        return imagesLoc("./" + "ck3ofcy4499904a5q2asg1xq0.png");
    }
}

在我看来，该问题似乎是由于动态文件名而触发的。

很长一段时间以来，我一直坚持不懈地寻求帮助，对此将不胜感激。