Vite+Vue3 动态引入本地图片（只需两行代码，亲测好用）

dagger FE

已于 2023-08-03 13:33:42 修改

阅读量956

点赞数

文章标签：前端 javascript 开发语言 vue vue.js

于 2023-07-28 13:36:45 首次发布

本文链接：https://blog.csdn.net/dxl99/article/details/131978287

版权

文章讲述了在Vite构建的项目中，如何通过import.meta.globEager动态导入大量图片，并设置了图片路径。但在项目打包后，图片显示出现异常，寻求解决方案。目前，作者希望通过社区找到解决打包后图片加载问题的方法，以便于其他开发者参考学习。

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

由于vite中不借助插件不能使用require( ' 图片路径 ' )引入图片，有时候在一个文件中需要使用大量图片，这时候单个引入就变得有点复杂和鸡肋；

所以我想如果能利用数据动态导入图片，上面的问题就变简单了！

第一步：导入所有需要用到的图片

    import.meta.globEager('/src/assets/main/*.png'); //导入首页所有图片

第二步：动态设置图片路径

 growCardList.value.forEach((item: any) => {
      item.imgSrc = new URL(`/src/assets/main${item.path}.png`, import.meta.url).href;
 });

第三步：直接使用img标签设置图片

 <img
   :src="item.imgSrc"
   style="
   width: 50px;
   height: 50px;"
 />

大功告成！

问题 : 项目打包之后图片显示异常(待解决,有解决这个问题的大佬可以发一下解决办法供朋友们借鉴和学习.谢谢!)

关注