アレイからのイメージは表示されません<img src>

Question

これはかなりぼんやりしていて、私はすべてが正しいと感じても動作するようには見えません。

SRCファイル内の画像パスを参照する配列があり、次に私のコンポーネントではimg srcタグを使用してその画像を表示したいのですが、それは私に壊れた画像を与えているだけです。私のアレイでは

私はここに

const actors = [ 
    { 
    person: 'Luke Skywalker', 
    trivia: 'wants to go to the Tashi Station', 
    image: '../../../../static/jt-luke.jpg', 
    id: 1 
    }, 
    { 
    person: 'Leia Organa', 
    trivia: 'Likes Buns', 
    image: '../../../../static/jt-leia.jpg', 
    id: 2 
    }, 
    { 
    person: 'Han Solo', 
    trivia: 'is scruffy', 
    image: '../../../../static/jt-han.png', 
    id: 3 
    }, 
    { 
    person: 'Chewbacca', 
    trivia: 'laughs it up like a fuzzball', 
    image: '/jt-chewie.jpg', 
    id: 4 
    } 
]; 

export default actors; 

画像を参照し、その後、私のコンポーネントで、私はそう

const { actors } = this.props; 
const namesList = actors.map(actors => { 
    return (
    <Col style={{ width: '100%' }} sm={12} md={6} lg={3}> 
     <UnorderedListed> 
     <img src={actors.image} /> 
     <p> 
      {actors.person} 
     </p> 
     <p>{actors.trivia}</p> 
     </UnorderedListed> 
    </Col> 
); 

namesList

<UnorderedStyled> 
    <Row> 
     {namesList} 
    </Row> 
    </UnorderedStyled> 

を呼び出すことによって返されるように設定していますなぜ私はエラーが発生しているのか理解できません。ありがとうございました！

Answer 1

あなたのアプリケーション（反応によって生成されたすべてのDOM）がメインのhtmlテンプレート/ページのルートノードに含まれていることを忘れないでください。画像へ

パスは、私はあなたの配列の@ P-95

のおかげで確認してください

{ 
person: 'Leia Organa', 
trivia: 'Likes Buns', 
image: require('../../../../static/jt-leia.jpg'), 
id: 2 

を入れて作るそれを考え出し

Answer 2

そのhtmlファイルの場所に応じて設定する必要があります}、

だけではなく、

{ 
    person: 'Leia Organa', 
    trivia: 'Likes Buns', 
    image: '../../../../static/jt-leia.jpg', 
    id: 2 
    },