javascript - 在 ReactJS 中显示来自 Json 的多个图像

Question

我已经成功创建了一个 json 模型，我需要在 React 应用程序上通过 axios 测试 json 请求。

现在，我可以 console.log json 文件结构并可以为链接分配数据。

问题是我的内容没有通过 Map 方法在 DOM 中正确呈现。图像没有出现。

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

也许这就是它不显示的原因，如果您可以将网址更改为类似以下内容:

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

它会显示出来。