找不到模塊 React require

Question

我收到以下錯誤：錯誤：找不到模塊“./img/grpd/IMG_2812.JPG”

我基本上是在嘗試遍歷源中的圖像目錄並顯示圖像。

我注意到如果我更改以下行

var filePath = './img/grpd/IMG_' + i + '.JPG';

到

var filePath = './img/grpd/IMG_2803.JPG';

頁面呈現得很好。

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class ImageWrapper extends React.Component { render() { // require expects a string return <img src={require("" + this.props.imageSrc)} />; } } class CartoonPage extends React.Component { render() { var cartoons = []; for (var i = 2803; i< 2817; i++) { var filePath = './img/grpd/IMG_' + i + '.JPG'; var img = <ImageWrapper key={i} imageSrc={filePath}/>; cartoons.push(img); } return cartoons; } } ReactDOM.render( <CartoonPage />, document.getElementById('root') );

Answer 1

如果您設置為使用 webpack（這對於 React 項目來說非常典型），那么您就不能使用完全動態的導入。

不可能使用完全動態的導入語句，例如 import(foo)。 因為 foo 可能是系統或項目中任何文件的任何路徑。

https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

您編寫的代碼不會在包中包含您的圖像。 當您的應用程序運行時，它需要的文件根本不在您的應用程序期望的位置。

解決方案是在導入中使用路徑的一部分。 這會給 webpack 一個關於應該包含什么的提示。 請注意，它將使用模式匹配，因此可能包含比包中實際需要的文件多得多的文件。 您可以使用魔術注釋來創建“包含”和“排除”模式，以進一步細化包含在包中的文件。

var cartoons = [];
for (var i = 2803; i< 2817; i++) {
    var img =
        <ImageWrapper key={i}
            imageSrc={require(
                /* webpackExclude: /pattern_to_exclude/ */
                /* webpackChunkName: "cartoon-images" */
                // preload because you'll need these during the current navigation:
                /* webpackPreload: true */
                `./img/grpd/IMG_${filePath}.JPG`
            )}
        />;
    cartoons.push(img);
}