在 ReactJS 中显示来自 JSON 的多个图像

Question

我已经设法创建了一个模型 json，我需要通过 react 应用程序上的 axios 测试一个 json 请求。

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

问题是我的内容没有通过地图方法在 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

也许这就是为什么它没有出现的原因，如果您可以将 url 更改为以下内容：

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

它会出现。