由于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;"
/>
大功告成!
问题 : 项目打包之后图片显示异常(待解决,有解决这个问题的大佬可以发一下解决办法供朋友们借鉴和学习.谢谢!)