JSONからReactにイメージを取得するにはどうすればよいですか？

Question

ファイルの場所とともに画像を取得するためにJSONを使用したいと思います。私のプログラムは以下のコードのようです。

私は{photos.Lillian.portfolioImage}で試してみましたが、JSON.stringify(photos.Annalise.portofolioで試しましたが、どれも画像を表示できません。私はconsole.log();を実行し、データを読み取ることができるかどうかをチェックしていますが、画像は表示されません。送信元アドレスを確認したところ、ここに追加すると動作します<img src="./img/TheGuardian/Lillian.png">

私のエラーは何ですか？ JSONから呼び出されたオブジェクトを再フォーマットする必要はありますか？私は1つが解析とフェッチを使用することができますが、これはAPIのために使用され、私が見ることができる限り、これはありません？ここで

は私のJSONです：ここで

{ 
    "Lillian" : { 
    "type": "The Guardian", 
    "portfolioImage": "./img/TheGuardian/Lillian.png" 
    }, 
    "Annalise" : { 
    "type": "TheGuardian", 
    "portfolioImage": "./img/TheGuardian/Annalise.png" 
    }, 
    "Raven" : { 
    "type": "DCComics", 
    "portfolioImage": "./img/TheGuardian/Raven.png" 
    } 
} 

は私のHTMLです：これにより

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import photos from './images.json'; 
import './App.css'; 

class App extends Component { 
    render() { 
    console.log(JSON.stringify(photos.Annalise.portfolioImage)); 

    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>beeccy´s portfolio.</h2> 
     </div> 
     <p className="App-intro"> 
      This was a test to present images from my portfolio. 
     </p> 
     <img src={photos.Lillian.portfolioImage} alt="Lillian" /> 
     <img src={photos.Raven.portfolioImage} alt="Raven" /> 
     <img src="JSON.stringify(photos.Annalise.portfolioImage)" alt="Annalise" /> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

const obj = 

    { 
      "Lillian" : { "type": "The Guardian", "portfolioImage":   "./img/TheGuardian/Lillian.png" }, 

      "Annalise" : { "type": "TheGuardian", "portfolioImage": "./img/TheGuardian/Annalise.png" }, 

      "Raven" : { "type": "DCComics", "portfolioImage": "./img/TheGuardian/Raven.png" } 
    }; 

    let images = []; 

    for(let item in obj){ 
     images.push(item.portfolioImage); 
    } 

あなたがイメージ配列

Answer 2

のようにオブジェクトのオブジェクトから画像を取得することができますHTMLでは、img要素のsrc属性をsourcに設定するeをイメージに追加します。次の例は、JSONをループしてすべての画像を一度に表示する方法も示しています。

const JSON = { 
    Lillian: { 
    type: 'The Guardian', 
    portfolioImage: './img/TheGuardian/Lillian.png' 
    }, 
    Annalise: { 
    type: 'TheGuardian', 
    portfolioImage: './img/TheGuardian/Annalise.png' 
    }, 
    Raven: { type: 'DCComics', portfolioImage: './img/TheGuardian/Raven.png' } 
}; 

class Example extends React.Component { 
    render() { 
    return (
     <div> 
     {Object.keys(JSON).map(key => (
      <div> 
      {JSON[key].type} 
      <img src={JSON[key].portfolioImage} key={key} /> 
      </div> 
     ))} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Example />, document.getElementById('root'));