这个代码该怎么优化好呢

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的别名，别名没有测试过不知到可不可以用。

Answer 2

用require，写法也是有要求的