当通过 props 传递文件名时，React 组件无法动态地 require() 图像文件答案

【问题标题】：React component not able to dynamically require() an image file when filename is passed down via props当通过 props 传递文件名时，React 组件无法动态地 require() 图像文件
【发布时间】：2017-06-18 21:56:32
【问题描述】：

我正在尝试创建一个可重用的 Feature 组件，该组件将根据我从父 FeatureList 组件传递给它的内容来呈现文本和图像。

当我尝试从组件中动态地 require() 图像时，它会引发错误，但是当我需要文件顶部的不变图像时，这很好。我不确定这是否是 Webpack、Typescript 或 React 组件生命周期的问题。

我已经解决并随后从https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter 弹出了这个 Microsoft/TypeScript-React-Starter

父组件：

import * as React from 'react';
import SingleFeature from './SingleFeature';

var data = {
    header: 'I am header copy',
    image: '../path/to/image.png'
};

function FeatureList() {
    return (
        <div>
            <SingleFeature
                image={data.image}
                header={data.header}
             />
        </div>
    );
}
export default FeatureList;

子组件：

import * as React from 'react';

const horizontalLine = require('../path/to/genericImage.png'); //THIS WORKS FINE

export interface Props {
    image: string;
    header: string;
}

function SingleFeature({ header, image }: Props) {

    const dynamicallyRequiredImage = require(image)   //THROWS ERROR

    return (

        <div>
            <h1>{header}</h1>                  //-->this accesses props
            <img src={horizontalLine} />       //-->this displays 
            <img src={dynamicallyRequiredImage} />    //THROWS ERROR
        </div>
    );
}

export default SingleFeature;

我得到的错误是：“未捕获的错误：找不到模块”。在 webpackMissingModule..." 之后是 34 多个其他 React 特定错误的折叠堆栈。

我是 TypeScript 的新手，绝不是 WebPack 专家。如果有人知道为什么只有动态需要的图像才会发生这种情况，或者可以为我指出正确的方向，我将不胜感激！

【问题讨论】：

标签： javascript reactjs typescript webpack

【解决方案1】：

你需要了解 webpack 的工作方式是它看起来你所有的 require() 和 imports() 并将它们捆绑在一起。也就是说，如果您要导入的是静态字符串。不是解析为字符串的表达式。

为了让 webpack 解析动态表达式，你需要为它构建一个“上下文”。 Link

上下文是一种告诉 webpack 你将使用来自特定目录的文件的方法，并且你希望 webpack 包含它们。

你的问题可以解决

let assetRequire = require.context('../path/to/imagesDir/', true, /\.(png|jpg|svg)$/)
const dynamicallyRequiredImage =  assetRequire('myImage.png')

尽量保持上下文构建到最里面的目录，因为它会将上下文匹配的所有文件添加到包中。
另请注意，在需要上下文中的文件时，您应该只提供相对于您构建上下文的文件夹的路径。

从 webpack 2 开始，他们开始智能地自动构建上下文，就像 here 解释的那样。上面的例子也适用于旧的 webpack..:P

【讨论】：