Display Multiple Images from Json in ReactJS

Question

I've managed to create a mockup json that i need to test a json request via axios on a react app.

For now, i can console.log the json file structure and can assign the data for the link.

The problem is that my content it's not being rendered correctly in the DOM via Map Method. the images are not appearing.

import {Link} from 'react-router-dom';
import axios from 'axios';

class DesignItem extends Component {
  state = { 
    isLoading: true,
    designs: [],
    error: null
   }

   componentDidMount () {
     axios.get('http://www.mocky.io/v2/5dadd81c2d0000e0f5e4bd57')
     .then (res => {
       console.log(res.data);
       const designs = res.data;
       this.setState({designs})
     })
   }
  render() { 
    return ( 
    <React.Fragment>
      {this.state.designs.map(designs => (
// this one is appearing right as expected
        <Link to={designs.productPage}>
        <div className="design-item" key={designs.id}>
// this image doesn't appear. the URL is there but the image it's broken
          <img src={designs.featUrl} alt="" />

        </div></Link>
      ))}
    </React.Fragment> 
    );
  }
}

export default DesignItem;```

have you tried inspecting the <img> element in your browser? What is the "src" showing? — Zeke Hernandez
– Zeke Hernandez, Commented Oct 21, 2019 at 16:41

Kenjoe · Accepted Answer · 2019-10-21 16:53:48Z

1

<React.Fragment>
  {this.state.designs.map(designs => (
    <Link to={designs.productPage} key={designs.id}> // I think the key must be put here instead on the div
        <div className="design-item">
          <img src={designs.featUrl} alt="" />
        </div>
   </Link>
  ))}
</React.Fragment>

Also upon checking the data, the image source was like this:

../images/products/alexandre-iii/0.jpg

Maybe that is why it is not showing up, if you could change the url to something like:

https://your-domain.com/public/images/products/alexandre-iii/0.jpg

It will show up.

answered Oct 21, 2019 at 16:53

Kenjoe

745 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display Multiple Images from Json in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related