Question

我收到以下错误：错误：找不到模块'./img/grpd/IMG_2812.JPG'

我基本上是试图遍历源代码中的images目录并显示图像。

我注意到我是否更改了以下行

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语句，例如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);
}

找不到模块React需要

1 个答案: