JSON에서 이미지를 React로 가져 오는 방법은 무엇입니까?

Question

파일 위치와 함께 이미지를 검색하는 데 JSON을 사용하고 싶습니다. 내 프로그램은 아래 코드와 같습니다.

나는 {photos.Lillian.portfolioImage}으로 시도했지만 JSON.stringify(photos.Annalise.portofolio으로 시도했지만 아무도 이미지를 표시 할 수 없습니다. console.log();을 완료했으며 데이터를 읽을 수 있는지 확인했지만 이미지가 나타나지 않는지 확인했습니다. 원본 주소를 확인한 후 여기에 추가 할 때 작동합니다. <img src="./img/TheGuardian/Lillian.png">.

내 오류는 무엇입니까? JSON이라는 객체를 다시 포맷해야합니까? 나는 구문 분석과 페치를 사용할 수있는 것을 보았지만, 이것은 API에 사용되며, 내가 볼 수있는 한, 이것은 아니다. 당신은 이미지 배열

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); 
    } 

: 여기

{ 
    "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입니다 : 여기

내 JSON의 HTML에서 요소의 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')); 

Answer 2

처럼 물체의 대상에서 이미지를 검색 할 수 있습니다 이렇게

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;