这个代码该怎么优化好呢

Question

let importFn = (icon)=>{import icon from "@/assets/monitor-data/" + icon + ".png";这行还报错了}import icon1 from "@/assets/monitor-data/icon1.png";import icon2 from "@/assets/monitor-data/icon2.png";import icon3 from "@/assets/monitor-data/icon3.png";import icon4 from "@/assets/monitor-data/icon4.png";vue项目，本来打算写一个函数，结果import那一行还报错了，不知道为什么，大家都是怎么解决这种重复引入的呢### 问题描述问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

 const context = require.context('@/assets/monitor-data', false, /\.png$/)  const keys = context.keys()
  keys.forEach(path => {    const img = context(path)    console.log(img)
  })

这个方法引入了'@/assets/monitor-data'目录下的所有png文件，如果需要过滤，可以在变量keys上调用filter()方法。也可以单独建一个你需要引入的文件目录，这样就不用过滤了。
如果报错了就不要使用webpack的别名，别名没有测试过不知到可不可以用。