第一种方法不推荐

export function require(imgPath) {
  try {
    const handlePath = imgPath.replace('@', '..');
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

页面引用

import { require } from "@/utils";

require("@/assets/images/icon2.png")

上面这种方法只能解决本地图片显示问题，如果部署到线上图片就出不来啦，建议使用下面这种

// 将所有图片导入进来
const req1 = import.meta.glob("../../assets/images/*.*", { eager: true });

const req = { ...req1 };

const imagesMap = {};

// 循环所有图片，将图片名设置成键，值为导入该图片的地址
for (const key in req) {
  // let name = key.replace(/(\.\/images\/|\..*)/g, '')
  let name = key.split("/").slice(-1)[0].split(".")[0];

  // 抛出图片大对象后，文件页面直接引入后将图片的具体名称作为属性就能导入该图片
  imagesMap[name] = req[key].default;
}

//所有图片都在imagesMap 里面