ReactJSを使用してローカルイメージを動的にロード

Question

配列から複数のイメージをレンダリングしようとしています。イメージコンポーネントにプロパティとして渡しています。しかし、何らかの理由で、レンダリングしたいローカルイメージが表示されません。 Webアドレスでホストされている画像をロードすると、その画像はになります。これは、「imageSource」プロパティが画像コンポーネントに渡されることに何も問題がないことを示しています。

<img src={{uri: source}} role="presentation" style={style.image} /> 

...しかし、私は何も任意の違いはありません：

let source = 'require(./img/' + props.imageSource + ")"; 

またはしよう：私はそうのようなソース形式で遊んで試してみました。

成分は下記のとおりです。私は完全に立ち往生しているので、大いに助けになるでしょう！

import React from 'react'; 

let Image = function statelessFunctionComponentClass(props) { 

    let source = './img/' + props.imageSource; 

    const style = { 

    image : { 

     width: '400pt', 
     height: '400pt' 
    } 
    } 

    return (

    <img src={source} role="presentation" style={style.image} /> 
) 
} 

export default Image 

Answer 1

イメージのフォルダを含めるには、require.context（）で新しいコンテキストを作成します。そこから、そのフォルダから必要なイメージに動的にアクセスし、それをsrcとして設定できます。このような構造のオフに行く

：YourContainer.jsで

APP 
├──webpack.config.js 
├──src 
    ├──containers 
     ├──YourContainer.js 
    ├──components 
     ├──YourComponent.js 
├──public 
    ├──bundle.js 
    ├──images 
      ├──dog.png 
      ├──cat.png 

は、あなたが

const images = require.context('../../public/images', true); 

そこから、あなたが参照できるimagesディレクトリことを要求する新しいコンテキストを作成したいです特に画像：

const dog = images('./dog.png'); 

または動的：

より完全な例については

let animal = images("./" + someVariable + ".png"); 

は、ここにあなたがあなたのイメージを引っ張るためにキーを使用して、オブジェクトを反復処理し、子コンポーネントへのスタイルの小道具としてあることを通過する間にそれを行うことができます方法は次のとおりです。

let YourContainer = ({ dispatch }) => { 
const data = projectData["projectData"]; 

// Require context image folder 
const images = require.context('../../public/images', true); 


return (  
    <div className="container-fluid"> 
     <Row> 
      { 
       // Iterate over data object 
       Object.keys(data).map((keyname, keyindex)=> { 

        let code = data[keyname]["code"]; 
        let title = data[keyname]["title"]; 
        // Dynamically reference image 
        // Set as inline style 
        // Pass as prop to child 
        let imgsrc = images("./"+code+".png"); 

        let styler = { 
         backgroundImage: "url(" + imgsrc + ")" 
        } 

        return <YourComponent 
           key={keyindex} 
           title={title} 
           style={styler} 
          /> 
       }) 
      } 
     </Row>  
    </div> 
) 
}