Отображение нескольких изображений от Json в ReactJS

Question

Мне удалось создать макет json, который мне нужен для проверки json-запроса через axios в приложении реагирования.

На данный момент я могу console.log описать структуру файла json и назначить данныедля ссылки.

Проблема в том, что мой контент неправильно обрабатывается в DOM через Map Method. изображения не появляются.

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;```

Answer 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>

Также после проверки данных источник изображения был таким:

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

Может быть, поэтому он не отображается, если вы могли бы изменить URL-адрес на что-то вроде:

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

Появится.