vue3 vite版本 引入本地静态图片的方式

创建一个assetsImages.js文件，
文件放哪里取决于个人习惯，
我的如下，

• 引入本地图片
• 当引入时，打包dist成功后，再运行dist会有问题，暂时不用，待修正，请移步到下方new URL写法

/**
 * 引入本地图片
 * 当引入时，打包dist成功，运行dist会有问题，暂时不用，待修正
 */
const picture = import.meta.globEager('../assets/images/*');
const imgList = Object.keys(picture).filter(item => true).map(item => {
  const url = picture[item]?.default;
  const name_suffix = url.substring(url.lastIndexOf('/') + 1, url.length);
  const name = name_suffix.substring(0, name_suffix.indexOf('.'));
  return {
    url,
    name_suffix,
    name,
  };
});

export default imgList;

使用方式：

换下方这种简单方式：用new URL() 和 import.meta

  /**
   * 获取本地图
   * @param name // 文件名 如 doc.png
   * @returns {*|string}
   */
  function getAssetsImages(name) {
    return new URL(`/src/assets/images/${name}`, import.meta.url).href;
  }

使用方法

const file =  getAssetsImages('doc.png');

运行后：

打包后：base64显示