我想将文件夹中的所有图片导入到具有动态导入功能的组件中,如下所示:
索引.js
const testFolder = './2020/';
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(testFolder);
const allowedExts = ['.png', '.jpg', 'svg'] // add any extensions you need
const modules = {};
if (files.length) {
let filterThruFiles = files.filter(file => allowedExts.indexOf(path.extname(file)) > -1)
filterThruFiles.forEach(file => modules[file] = `./${file}`);
}
module.exports = modules;
let modulesStringify = JSON.stringify(modules);
fs.writeFileSync('pics-url-list.json', modulesStringify);
我得到一个带有路径的对象并将它写入一个文件,这工作正常:
//pics-url-list.json
{
"1-1.jpg":"./1-1.jpg",
"1-2.jpg":"./1-2.jpg",
"1-3.jpg":"./1-3.jpg"
//and so on
}
但是当我运行 npm start 时,我得到了这个错误。主要问题是如何在 React 组件中访问这个 .json 文件?现在没有 console.log 在 App.js 中工作,它只显示关于 fs.readdirSync 的错误
//App.js component
import picList from '../images/pics-url-list.json';
console.log(picList);
最佳答案
客户端应用程序不可能使用类似 fs 的模块。
有一种方法可以使用 require.context
动态导入所有图像
例如,
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
关于javascript - TypeError : fs. readdirSync 不是函数 React js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63742173/