反應，圖像從陣列沒有出現在<img src>

相當難倒這個，似乎無法讓它工作，即使我覺得我有一切正確的。反應，圖像從陣列沒有出現在<img src>

我有一個數組引用我的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>

返回我不明白爲什麼我會收到錯誤，誰能提供幫助？謝謝！

來源

2017-07-15 sthig

我認爲src應該是一個url'http：// ...'而不是一個文件路徑或者看到這個：https：//stackoverflow.com/questions/34582405/react-wont-load-local-images –

不知道我在這裏跟着你100％，所以我需要寫出一些像 sthig

和要求不能正常工作，除非我做錯了 – sthig

不要忘了你的應用程序（所有由react生成的DOM）都包含在主html模板/頁面的根節點中。

路徑將圖像應根據該HTML文件

來源

2017-07-15 16:11:21 taha

我以爲我做得對，可能不是。至於做什麼還不完全理解 – sthig

的位置，我想它了感謝@ P-95

陣列中

確保把

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

設置}，

不僅僅是

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

來源

2017-07-15 16:40:03 sthig

反應，圖像從陣列沒有出現在<img src>

回答

相關問題