图像未加载在带有params的路线上，但可在没有params的线路上工作

Question

你好，由于某种原因，我遇到了一个问题，无法在带有params的路线上加载图像。然而，在任何没有params的路线上，他们的负载都很好。

例如，我加载路由'/product/：id'；

该路由的组件包含该

class Product extends Component {
constructor(props) {
super(props);
this.state = {
product: null
}
}
componentDidMount() {
this.fetchProduct();
}
fetchProduct() {
const { id } = this.props.match.params;
axios.get(`/api/product/${id}`).then(function (response) {
this.setState({ product: response.data });
}.bind(this));
}
renderProduct() {
let { product } = this.state;
if (!product) {
return false
}
else {
return (
<div className='row'>
<div className='col-md-5'>
<img src={product.main_img} />//this image is not displaying
<h5>{product.title}</h5>
<p>{product.description}</p>
</div>
<div className='col-md-5'>
<Form product={product}/>
</div>
</div>
)
}
}
render() {
return (
<div className='container'>
{this.renderProduct()}
</div>
)
}
}

好的，所以该产品的所有信息都显示正确，我可以console.log(product.main_img(，这就是正确的图像。那为什么图像没有显示出来呢？我在另一条没有参数的路线上有完全相同的图像，显示良好。我好像想不通。

Answer 1

我也遇到了同样的问题，我修复了它，但将所有到图像的链接都改为以斜杠"/"开头，然后是目录名，而不是"./"或者只是目录名。