小编rad*_*laz的帖子

图像不会在带有参数的路线上加载,但可以在没有参数的路线上加载

您好,由于某种原因,我遇到了一个问题,图像无法在带有参数的路线上加载。然而,在任何没有参数的路线上,它们加载得很好。

例如我加载路线 '/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>
        )
    } …
Run Code Online (Sandbox Code Playgroud)

javascript image reactjs react-router react-router-dom

6
推荐指数
1
解决办法
2849
查看次数