您好,由于某种原因,我遇到了一个问题,即图像无法在带有参数的路线上加载。然而,在任何没有参数的路线上,它们都加载得很好。
所以例如我加载路线'/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) ,这是正确的图像。那为什么图片不显示呢?我在另一条路线上有完全相同的图像,没有显示正常的参数。我似乎无法弄清楚。
最佳答案
我遇到了同样的问题,我修复了它,但将所有指向图像的链接更改为以斜杠“/”开头,然后是目录名而不是“./”或只是目录名。
关于javascript - 图像未在带有参数的路线上加载,但在没有参数的路线上有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53053625/