vue3 Vite Glob批量匯入與webpack require.context
阿新 • • 發佈:2022-03-30
vite 遍歷本地圖片資料夾,關鍵是‘import.meta.globEager('../assets/mdcImgs/*.png');’,獲取資料夾內所有的圖片路徑,進行下一步業務操作。
const checkImgs = function (name) { // let files = require.context('@/assets/mdcImgs', false, /\.png$/); let files = import.meta.globEager('../assets/mdcImgs/*.png'); let AllPics = Object.values(files).map((v) => v.default); let isExist = 0; let imgSrc = ''; AllPics.forEach( val => { if(val.indexOf(name) !== -1) { isExist += 1; } }); if (isExist !== 0) { // 頭像存在 imgSrc = '/src/assets/mdcImgs/' + name + '.png'; } else { imgSrc = '/src/assets/mdcImgs/test.png'; } return imgSrc; }; export default checkImgs
webpack 遍歷本地圖片資料夾,關鍵是‘require.context('@/assets/mdcImgs', false, /.png$/);’,獲取資料夾內所有的圖片路徑,進行下一步業務操作。
const checkImgs = function (name) { let files = require.context('@/assets/mdcImgs', false, /\.png$/); let AllPics = files.keys(); let isExist = 0; let imgSrc = ''; AllPics.forEach( val => { if(val.indexOf(name) !== -1) { isExist += 1; } }) if (isExist !== 0) { // 頭像存在 imgSrc = require('@/assets/mdcImgs/' + name + '.png'); } else { imgSrc = require('@/assets/mdcImgs/test.png'); } return imgSrc; } export default checkImgs