反應。在JSON文件路徑引用和backgroundImage似乎不可思議

我的應用與創造 - 反應 - 創建的應用程序，反應。在JSON文件路徑引用和backgroundImage似乎不可思議

林通過我的JSON文件，.MAP迭代，我的本地路徑存儲圖像，但我認爲create-反應應用程序以某種方式改變路徑，我不明白如何。

const list = this.state.people.map((d, i) => { return <li 
    key={i} 
    className="content" 
    style={{ backgroundImage: `url(${d.Picture})` }} 
    >

以上是我開立的標籤，我打環下面我JSON文件中的數據：在「亞當」的圖片的偉大工程，並顯示在頁面上，照片存儲在哪裏然而，是不是。我發現鉻開發工具的路徑，所以我只是複製粘貼。

在「鮑勃」下面的例子是在IMG（從根部）的實際路徑我希望能夠把圖像中的文件夾我的所有圖像和存儲正確的路徑在JSON文件

{ 
    "Name": "Adam", 
    "Born": 1971, 
    "Picture": "/static/media/elonmusk.3489bce1.jpg" 
}, 

{ 
    "Name": "Bob", 
    "Born": 1999, 
    "Picture": "/src/css/images/elonmusk.jpg" 
},

以上是我的文件夾結構，App.js是我呈現數據，persons.json是我存放的文件路徑和圖像是在那裏我有圖像

來源

2017-06-23 Cuddly Bunny

圖像的文件夾需要靜態分析o你需要require他們。請參閱此處瞭解更多background信息。

與你上面的例子

所以，而是採用了json文件創建一個people.js文件，而不是像這樣有需要爲每個圖像聲明：

// file: people.js 

const people = [ 
    { 
    id: 0, 
    name: 'Adam', 
    born: 1971, 
    picture: require('../path/to/image.jpg') 
    }, 
    { 
    id: 1, 
    name: 'Bob', 
    born: 1999, 
    picture: require('../path/to/image2.jpg') 
    } 
]

然後，你可以映射在這個信息來產生JSX和你圖像將呈現。

const people = require('../path/to/people.js') 

renderPeopleList() { 
    return people.map(p => 
    <div key={p.id} style={{ backgroundImage: `url(${p.picture})` /> 
) 
}

來源

2017-08-09 20:31:31 cubiio

反應。在JSON文件路徑引用和backgroundImage似乎不可思議

回答

相關問題