使用Require批量导入某一文件夹中的所有图片

162 阅读1分钟

使用require批量导入图片的方法

在网上搜索,其实有很多帖子都有记录这个方法,但是好多我都没有成功,今天分享给大家一个我使用成功的方法。
takeImgs() {

            // 定义根据格式判断后缀长度
            let length;
            // 定义从文件夹中导入的图片
            let requireModule;
            // 定义一个数组用于承载图片的信息
            let imagesNameArr = [];
            // 根据后缀判断图片格式
            requireModule = require.context("../../../assets/images/joinUs/row1", false, /\.png$/);

            console.log(requireModule.keys(), 'requireModule')
            imagesNameArr = [];
            for (var j = 0; j < requireModule.keys().length; j++) {
                // 将图片的名字从第二位开始抽取赋值到imagesNameArr
                imagesNameArr.push(requireModule.keys()[j].substr(2, requireModule.keys()[j].length));
                // 定义对象,存放图片的名称和路径
                let value = {
                    name: '',
                    url: ''
                }
                // 将图片的名称和url传入value对象
                value.name = imagesNameArr[j]
                // value.url = requireModule[j]
                //如果是在public里取得图片就不需要require!!
                value.url = require('../../../assets/images/joinUs/row1/' + imagesNameArr[j]);
                // 将value对象传入data中
                this.img.push(value);
            }
        }

希望大家可以用到!