React：リストを使って画像マッピングを動的にレンダリングするにはどうしたらいいですか？

Question

私はオブジェクトの配列を介してマップしようとしています。

私のJSONでstaffの各配列要素はありimgUrl：

<Home data={data.home} /> 

：これは、コンポーネントに

import data from './data.json'; 

と私のメインのApp.jsファイルに持ってきて、渡され

{ 
    "home": { 
     ... 
     "staff": [ 
      { 
       ... 
       "imgUrl": "../Images/Jon.JPG", 
       ... 
      }, 
      ... 
     ], 
     ... 
    } 
    ... 
} 

と自宅で私は持っています：

let staff = this.props.data.staff.map((member, i) => { 
    return (
     <Staff imgUrl={member.imgUrl} /> 
    ); 

、その後Staffに私がイメージをロードしようとしている：これは動作しません。しかし

<img src={this.props.imgUrl} alt={this.props.name} /> 

、ALTが表示されます。正しい文字列がsrcに渡されていることを確認しましたが、イメージはまだロードされていません。 {this.props.imgUrl}をjsonに格納されている実際のパスに置き換えると、イメージが読み込まれます。私はこれを数時間は探していましたが、他の人が同様の問題に使っていたソリューションをどこにでも実装することができなかった。

私はこのプロジェクトを開始するためにcreate-react-appを使用しました。

編集：私はかなりばかげていました。私は以前Imageフォルダにコピーしていました（srcにあり、publicに移動しました）が、srcのパスに私のパスでアクセスしました。私はそれ以来、すべての作品を公開しています。みんな助けてくれてありがとう。

Answer 1

あなたはpublicフォルダ

render() { 
    // Note: this is an escape hatch and should be used sparingly! 
    // Normally we recommend using `import` for getting asset URLs 
    // as described in “Adding Images and Fonts” above this section. 
    return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; 
} 

を参照してください使用する必要があります

import logo from './logo.png'; // Tell Webpack this JS file uses this image 

つまり、あなたのJSファイルに画像をインポートしていない場合：あなた除き

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder

Answer 2

をパブリックフォルダにこのイメージを置くuldn'tしかし解決は比較的簡単です。それはURLを取得しながら

{ 
"home": { 
    ... 
    "staff": [ 
     { 
      ... 
      "imgUrl": require("../Images/Jon.JPG"), 
      ... 
     }, 
     ... 
    ], 
    ... 
    } 
... 
}