如何从 ReactJS 的文件夹中导入所有图像？

IT技术 javascript reactjs
2021-04-18 09:28:44

我想从文件夹中导入所有图像并希望根据需要使用。但不能通过以下方法做到这一点。我在做什么？这：

import * as imageSrc from '../img';
let imageUrl = [];
    imageSrc.map(
    imageUrl.push(img) 
    ))

我在 console.log 中收到此错误

index.js:1452 ./src/components/Main.jsx
Module not found: Can't resolve '../img' in 'G:\Projects\Personal\Portfolios\Portfolio_Main\React_portfolio\portfolio\src\components'

文件夹结构：

src>
  components>
    Main.jsx
  img>
    [all image files]
1个回答

这在普通 javascript 中是不可能的，因为导入/导出是静态确定的。

如果您正在使用 webpack，请查看 require.context 。您应该能够执行以下操作：

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

参考：https : //webpack.js.org/guides/dependency-management/#require-context

如何在反应中使用 webpack？
2021-05-22 09:28:44
是的，Webpack 是默认的。但是如何在导入图像后将图像加载到数组？
2021-06-03 09:28:44
在代码片段中，'images' 变量包含一个由 webpack 解析的图像路径数组
2021-06-11 09:28:44
它不返回任何数组。它返回带有空数组的对象！
2021-06-12 09:28:44
您是否通过 create-react-app CLI 生成了您的应用程序？
2021-06-13 09:28:44
其它你可能感兴趣的问题
上一篇react警告：flattenChildren(...)：遇到两个具有相同密钥的孩子 下一篇如何在 create-react-app 中将 `src` 文件夹更改为其他内容