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

kwok_çç

已于 2023-06-08 16:42:37 修改

阅读量711

点赞数 2

分类专栏： vue3 文章标签：编辑器前端

于 2022-07-26 20:26:50 首次发布

本文链接：https://blog.csdn.net/weixin_43413047/article/details/126002456

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3和Vite构建环境下，由于不支持require，导致动态引入图片和Echarts图表中使用图片出现问题的解决方法。通过使用import.meta.url和new URL API来构建图片路径，确保图片能在打包后正确显示。同时，展示了如何在Echarts图表中设置自定义图标。

摘要由CSDN通过智能技术生成

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,
          },
        },
      ],
    };