How do I retrieve images from JSON into React? - html

Question

I want to use JSON to retrieve my images along with their file location. My program looks like the code below.
I've tried with {photos.Lillian.portfolioImage} and with JSON.stringify(photos.Annalise.portofolio however, none of them can display the images. I've done a console.log(); and checked if the data can be read and it does appear however, the images will not appear. I've checked the source address and it works when I add it here <img src="./img/TheGuardian/Lillian.png">.
What is my error? Do I need to reformat the object called from JSON? I've seen one can use parse and fetch however, this is used for APIs and as far as I can see, this isn't?
Here's my 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"
}
}
Here's my 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

Like in HTML, you want to set the src attribute of an img element the source to the image. The following example also shows how you can loop over the JSON and show all images at once.
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

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);
}
By doing this you can retrieve images from the object of objects into the images array