Promise的一次实际使用

最近项目中有一个用canvas画拓扑图的需求，实际开发中的遇到的一个问题是我需要等三张资源图片加载完再去绘制，否则会报错。我们都知道如果是一张图片，我们给它加一个onload事件再去做进一步处理就好，但是如果是多张图片呢？了解了一下Promise，决定用promise做点事情。
主要的思路：每张图片的加载当做一个Promise的任务，统一放到一个数组里面，再借助Promise.all就知道所有的任务都完成了。

loadResources () {
   let paths = [require('@/assets/svg/join.png'), require('@/assets/svg/node.svg'), 
   require('@/assets/svg/swap.svg')]
   let works = []
   paths.forEach(path => {
       works.push(new Promise(resolve => {
           let img = new Image()
           img.onload = function () {
               resolve(img)
           }
           img.src = path
       }))
   })
   return new Promise(resolve => {
      Promise.all(works).then(pics => {
          this.pics = pics
          resolve()
      }).catch(err => {
        console.log(err)
      })
   })
}

然后我们在mounted中拿到canvas就可以绘制了：

await this.loadResource()
// this.pics已经保存了需要的图片数据，接下来绘制就好了

遇到还没解决的问题：
本来只想在paths保存路径，然后img.src = require('path'),但是！！！报错了！！！
目前还不知道怎么解决，记录一下。