使用 React 和 create-react-app 动态导入
Dynamic import with React and create-react-app
我有一个组件图像，它使用一个来自循环的值。
类似于：
arr.map(m => <Component imgsrc={m.src} />)
其中 src prop 是图像文件夹的 link。
那我做
<img src={require(`${props.imgsrc}`)} />
但如果不起作用，但是如果我静态使用它
<img src={require(`same-path-as-src`)} />
有效。
有什么区别？
Webpack 需要知道在哪个目录中查找，因为它需要在构建时知道要在构建中包含哪些目录。如果整个路径是动态的，Webpack 将需要在构建中包含整个文件系统，这是不可行的。
如果 Webpack 可以确定要查找的位置，则可以使部分路径动态化。
<img src={require(`../images/${props.imgsrc}.png`)} />
我有一个组件图像，它使用一个来自循环的值。
类似于：
arr.map(m => <Component imgsrc={m.src} />)
其中 src prop 是图像文件夹的 link。 那我做
<img src={require(`${props.imgsrc}`)} />
但如果不起作用，但是如果我静态使用它
<img src={require(`same-path-as-src`)} />
有效。
有什么区别？
Webpack 需要知道在哪个目录中查找，因为它需要在构建时知道要在构建中包含哪些目录。如果整个路径是动态的，Webpack 将需要在构建中包含整个文件系统，这是不可行的。
如果 Webpack 可以确定要查找的位置，则可以使部分路径动态化。
<img src={require(`../images/${props.imgsrc}.png`)} />