Vue3 + echart动态引入图片以及打包问题

Vite + vue3 不能使用require

原标题:在vue3中动态引入图片 vue3 不能用require了

特别感谢评论区朋友指出的问题
是Vite + vue3 不能使用require
所以特意回来考古，更正！！！

// 需要显示的数据 
const sceneOptions = reactive({
  data: [],
});



// 获取数据 
//解析为需要的结构  图片尽量不要带中文 不要以数字开头
// 可以使用相对路径 
/*
	sceneOptions.data = [
		{	
			text : "xxxx",
			neId : "xxxx",
			src : new URL(`../../../../assets/keyArea/public/gaotie.png`,
		}
		...
	]

*/

const getImgSrc = (nameCN) => {
  let imgName = "gaotie";
  switch (nameCN) {
    case "高铁":
      imgName = "gaotie";
      break;
    case "高速":
      imgName = "gaosu";
      break;
    case "地铁":
      imgName = "ditie";
      break;
    case "高校":
      imgName = "gaoxiao";
      break;
  }
  return imgName;
};

res.forEach((data, index) => {
    sceneOptions.data.push({
      text: data.neName,
      neId: data.neId,
      src: new URL(
        `../../../../assets/keyArea/public/${getImgSrc(
          imgIconName[index]
        )}.png`,
        import.meta.url
      ).href,
    });
  });

在vue3 中使用 echart 引入图片 打包后无法显示图片的问题

//echart option
option ={
      tooltip: { },
      geo: {},
      series: [
        /*地市打点*/
        {
          type: "scatter",
          coordinateSystem: "geo",
          symbolSize: [50, 50],
          symbolOffset: [0, 0],
          data: scatterData,
			/* 重点*/
          symbol:
            "image://" +
            new URL(
              "../../../../../../assets/governmentEnterprise/centerBox/pic_map.png",
              import.meta.url
            ).href,
          tooltip: {
            show: false,
          },
        },
      ],
    };