如何從ReactJS中的文件夾導入所有圖像？

Question

我想從文件夾導入所有圖像，並希望根據需要使用。 但不能通過以下方法來做到這一點。 我在做什么？ 這個：

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]

Answer 1

這在普通的javascript中是不可能的，因為導入/導出是靜態確定的。

如果您使用的是webpack，請查看require.context。 您應該能夠執行以下操作：

 function importAll(r) { return r.keys().map(r); } const images = importAll(require.context('./', false, /\\.(png|jpe?g|svg)$/)); 

ref： https ： //webpack.js.org/guides/dependency-management/#require-context