ファイル名が小道具を介して渡されたときに、画像ファイルを動的にrequire（）することができない反応コンポーネント

Question

親フィーチャリストコンポーネントから渡したテキストと画像に基づいてレンダリングする再利用可能なフィーチャコンポーネントを作成しようとしています。 。

コンポーネント内から画像を動的にrequire（）しようとすると、エラーがスローされますが、ファイルの一番上に不変の画像が必要な場合は問題ありません。 Webpack、これはおそらくReactコンポーネントのライフサイクルの問題であるかどうかは不明です。

私はのオフに働いていたし、その後https://github.com/Microsoft/TypeScript-React-Starter#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; 

Iエラー取得中です：「キャッチされていないエラー：モジュールが見つかりません」。「 at webpackMissingModule ...」 34 +その他の反作用固有のエラーを確認してください。

私はTypeScriptの新版であり、決してWebPackのエキスパートではありません。なぜこれが動的に必要とされる画像でのみ起こっているのか、正しい方向で私を指し示すことができるのか誰かが分かっているなら、私はそれを高く評価します！

Answer 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