使用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);
}
}
希望大家可以用到!