创建一个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显示
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐