找不到模块 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);
}